我刚刚将我的react-navigation版本从1..0.0-beta.11更新到最新的react-navigation版本3.现在,在我的项目中,我在HomeScreen.js中使用了createStackNavigator。这是以下代码 -
HomeScreen.js
import React from 'react';
import { StyleSheet, Text, View, AsyncStorage } from 'react-native';
import {
createStackNavigator
} from "react-navigation";
import WelcomeScreen from './WelcomeScreen';
import LoginScreen from './components/LoginScreen';
import NoteMeHome from './components/NoteMeHome';
import HomeDrawer from './HomeDrawer/HomeDrawer';
import SettingsScreen from './components/SettingsScreen';
class HomeScreen extends React.Component {
state = {
getValue: null,
}
async componentDidMount() {
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},
WelcomeScreen: {screen:WelcomeScreen},
NoteMeHome: {screen:NoteMeHome},
SettingsScreen: {screen:SettingsScreen}
},
{
initialRouteName: 'WelcomeScreen'
}
)
const AppStackNavigator2 = createStackNavigator({
WelcomeScreen: {screen:WelcomeScreen},
HomeDrawer: {screen:HomeDrawer
},
LoginScreen: {screen:LoginScreen},
NoteMeHome: {screen:NoteMeHome},
SettingsScreen: {screen:SettingsScreen}
},
{
initialRouteName: 'WelcomeScreen'
}
)
export default HomeScreen;
在进行此更新之前,我的代码运行完美。但更新后显示以下错误 -
这是package.json文件 -
{
"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.com/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
}
所以,如果有人帮我解决这个问题,那将是非常好的
只需在您的问题中添加此代码。您必须将您的堆栈包装在createAppContainer中。
import { createAppContainer } from 'react-navigation'
const AppStackNavigator = createAppContainer(createStackNavigator({
LoginScreen: {screen:LoginScreen},
HomeDrawer: {screen:HomeDrawer},
WelcomeScreen: {screen:WelcomeScreen},
NoteMeHome: {screen:NoteMeHome},
SettingsScreen: {screen:SettingsScreen}
},
{
initialRouteName: 'WelcomeScreen'
}
))
const AppStackNavigator2 = createAppContainer(createStackNavigator({
WelcomeScreen: {screen:WelcomeScreen},
HomeDrawer: {screen:HomeDrawer
},
LoginScreen: {screen:LoginScreen},
NoteMeHome: {screen:NoteMeHome},
SettingsScreen: {screen:SettingsScreen}
},
{
initialRouteName: 'WelcomeScreen'
}
))
在react-navigation v3中,你必须用makeRootNavigator
包装createAppContainer
。
将您的代码更改为:
render() {
const Navigator = createAppContainer(makeRootNavigator(this.state.accessToken));
return <Navigator />
}
并且不要忘记在文件顶部导入createAppContainer
import {createSwitchNavigator, createAppContainer} from 'react-navigation'