javascript - How to solve "Invariant Violation: The navigation prop is missing for this navigator"? - Stack Ov

admin管理员组

文章数量:1316681

I just updated the my react-navigation version from 1..0.0-beta.11 to latest react-navigation version 3. Now, in my project I have used the createStackNavigator in my HomeScreen.js. Here's the code for that-

HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View, AsyncStorage } from 'react-native';
import {
  createStackNavigator
} from "react-navigation";
import WeleScreen from './WeleScreen';
import LoginScreen from './ponents/LoginScreen';
import NoteMeHome from './ponents/NoteMeHome';
import HomeDrawer from './HomeDrawer/HomeDrawer';
import SettingsScreen from './ponents/SettingsScreen';

class HomeScreen extends React.Component {

  state = {
    getValue: null,
  }

  async ponentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });

  }

  render() {
    console.log('#ZZZ:', this.state.getValue);

    if(this.state.getValue !== null) {
      return (
        <AppStackNavigator/>
      );
    } else {
      return (
        <AppStackNavigator2/>
      );
    }

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const AppStackNavigator = createStackNavigator({
  LoginScreen: {screen:LoginScreen},
  HomeDrawer: {screen:HomeDrawer},
  WeleScreen: {screen:WeleScreen},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen}

}, 

{
  initialRouteName: 'WeleScreen'

}

)

const AppStackNavigator2 = createStackNavigator({
  WeleScreen: {screen:WeleScreen},
  HomeDrawer: {screen:HomeDrawer
  },

  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen}

},  
{
  initialRouteName: 'WeleScreen'

}

)
export default HomeScreen;

Before making this update my code was running perfectly. But after updating it is showing the following error-

And here's the package.json file-

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "native-base": "^2.12.1",
    "react": "16.5.0",
    "react-native": ".0.0.tar.gz",
    "react-native-awesome-alerts": "^1.2.0",
    "react-native-cardview": "^2.0.2",
    "react-navigation": "^3.6.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

So, it would be very nice if anyone help me to solve this problem

I just updated the my react-navigation version from 1..0.0-beta.11 to latest react-navigation version 3. Now, in my project I have used the createStackNavigator in my HomeScreen.js. Here's the code for that-

HomeScreen.js

import React from 'react';
import { StyleSheet, Text, View, AsyncStorage } from 'react-native';
import {
  createStackNavigator
} from "react-navigation";
import WeleScreen from './WeleScreen';
import LoginScreen from './ponents/LoginScreen';
import NoteMeHome from './ponents/NoteMeHome';
import HomeDrawer from './HomeDrawer/HomeDrawer';
import SettingsScreen from './ponents/SettingsScreen';

class HomeScreen extends React.Component {

  state = {
    getValue: null,
  }

  async ponentDidMount() {
    const token = await AsyncStorage.getItem('token');
    this.setState({ getValue: token });

  }

  render() {
    console.log('#ZZZ:', this.state.getValue);

    if(this.state.getValue !== null) {
      return (
        <AppStackNavigator/>
      );
    } else {
      return (
        <AppStackNavigator2/>
      );
    }

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const AppStackNavigator = createStackNavigator({
  LoginScreen: {screen:LoginScreen},
  HomeDrawer: {screen:HomeDrawer},
  WeleScreen: {screen:WeleScreen},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen}

}, 

{
  initialRouteName: 'WeleScreen'

}

)

const AppStackNavigator2 = createStackNavigator({
  WeleScreen: {screen:WeleScreen},
  HomeDrawer: {screen:HomeDrawer
  },

  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen}

},  
{
  initialRouteName: 'WeleScreen'

}

)
export default HomeScreen;

Before making this update my code was running perfectly. But after updating it is showing the following error-

And here's the package.json file-

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "native-base": "^2.12.1",
    "react": "16.5.0",
    "react-native": "https://github./expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-awesome-alerts": "^1.2.0",
    "react-native-cardview": "^2.0.2",
    "react-navigation": "^3.6.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

So, it would be very nice if anyone help me to solve this problem

• javascript
• react-native
• react-navigation

Share Improve this question Follow edited Apr 5, 2019 at 6:33 S. M. Asif asked Apr 5, 2019 at 6:27 S. M. AsifS. M. Asif 3,7091010 gold badges3939 silver badges6565 bronze badges 1

• May be this existing threads can be helpful stackoverflow./questions/53379913/… stackoverflow./questions/53367195/… – Murali Nepalli Commented Apr 5, 2019 at 6:32

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Just add this code in your question.You have to wrap your stack in createAppContainer.

import { createAppContainer } from 'react-navigation'



const AppStackNavigator = createAppContainer(createStackNavigator({
  LoginScreen: {screen:LoginScreen},
  HomeDrawer: {screen:HomeDrawer},
  WeleScreen: {screen:WeleScreen},
  NoteMeHome: {screen:NoteMeHome},
  SettingsScreen: {screen:SettingsScreen}

}, 
{
  initialRouteName: 'WeleScreen'

}
))


const AppStackNavigator2 = createAppContainer(createStackNavigator({
  WeleScreen: {screen:WeleScreen},
  HomeDrawer: {screen:HomeDrawer
  },

  LoginScreen: {screen:LoginScreen},
  NoteMeHome: {screen:NoteMeHome},

  SettingsScreen: {screen:SettingsScreen}

},  
{
  initialRouteName: 'WeleScreen'

}
))

In react-navigation v3, you must wrap makeRootNavigator with createAppContainer.

Change your code to :

render() {
   const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
   return <Navigator />
}

and don't forget to import createAppContainer on top of the file

import {createSwitchNavigator, createAppContainer} from 'react-navigation'

In react-navigation v4, the structure of wrapping with createAppContainer remains but you must import createAppContainer from react-navigation and createStackNavigator from react-navigation-stack

for example

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import HomeScreen from './HomeScreen';
import AnotherScreen from './AnotherScreen';

export default createAppContainer(
  createStackNavigator(
    {
      Home: HomeScreen,
      Another: AnotherScreen,
    },
    {
      initialRouteName: 'Home',
    },
  ),
);

本文标签：