我是React Native的新手,我在实现react-navigation时发生错误。
我在互联网上查找了此错误,但是信息很少,但是我发现该错误来自我的navigation.js
文件。
Navigation.js
import {createAppContainer, createStackNavigator} from 'react-navigation'
const MainNavigator = createStackNavigator({
login: {screen: LoginScreen},
});
const AppNavigation = createAppContainer(MainNavigator);
export default AppNavigation;
App.js
import Navigation from './src/navigators/Navigation'
import...
class App extends React.Component {
componentDidMount() {
this.props.checkLogin();
}
_renderSplash = ()=>{
return (
<View>
<ActivityIndicator size="large"/>
<Text>Loading...</Text>
</View>
);
}
_renderRoot = (authenticated)=>{
console.log(authenticated);
//const NavigationRoot = Navigation(authenticated); // for later
return <Navigation />; // <--- called
}
render() {
const {app_started, authenticated} = this.props.authState;
return ((app_started ? this._renderRoot(authenticated):this._renderSplash));
}
}
const mapStateToProps = (state) => {
return {
authState: state.authState
}
};
const mapDispatchToProps = (dispatch, ownProps)=>{
return {
async checkLogin(){
const isLoggin = await AsyncStorage.getItem('authenticated').catch(e => console.log(e));
if(isLoggin){
dispatch(actionCreator(LOGIN_SUCCESS))
}
dispatch(actionCreator(APP_LOADED))
}
}
};
const Root = connect(mapStateToProps, mapDispatchToProps)(App);
const RootContainer = ()=> {
return (
<Provider store={configureStore}>
<Root/>
</Provider>
)
};
export default RootContainer
LoginScreen.js
import ...
class LoginScreen extends React.Component{
_login = ()=>{
// check the fields
let token = 'whatever';
this.props.authSuccess(token);
};
render() {
return (
<View>
<TextInput.../>
<TextInput... onSubmitEditing={this._login}/>
<Button... onPress={this._login}/>
</View>
);
}
}
const mapStateToProps = (state) => {
return state
};
export const actionCreator = (action, payload=null)=>{return{type: action, payload: payload}};
const mapDispatchToProps = (dispatch,ownProps)=>{
return {
authSuccess: (token)=>{
AsyncStorage.multiSet([['token',token], ["login", '1']]);
dispatch(actionCreator(LOGIN_SUCCESS))
}
}
};
const LoginRoot = connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
export default LoginRoot;
package.js
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {...},
"dependencies": {
"@types/react": "^16.7.21",
"email-validator": "^2.0.4",
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-keyboard-spacer": "^0.4.1",
"react-navigation": "^3.0.9",
"react-redux": "^6.0.0",
"redux": "^4.0.1"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}