undefined 不是一个对象（评估'this.props.navigation'）-React Native

Question

undefined 不是一个对象（评估'this.props.navigation'）

我不断收到此错误，我无法弄清楚我的代码有什么问题。 该程序旨在检查用户是否已登录，如果未登录，则将他们定向到“注册”页面。 但是，它似乎不起作用。 有人能告诉我出了什么问题吗？

载入画面：

 import React, {Component} from 'react'; import { View, Text, ActivityIndicator, StyleSheet } from 'react-native' import firebase from 'firebase' export default class Loading extends React.Component{ componentDidMount() { firebase.auth().onAuthStateChanged(function(user) { console.log(user) if (user) { console.log('user is signed in') } else { console.log('user is not signed in') this.props.navigation.navigate('SignUp') } }); } render() { return ( <View style={styles.container}> <Text>Loading</Text> <ActivityIndicator size="large" /> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', } })

应用程序.js：

 import {createAppContainer, createSwitchNavigator, SwitchNavigator} from 'react-navigation'; import {createBottomTabNavigator} from 'react-navigation-tabs'; import Ion from 'react-native-vector-icons/Ionicons'; import FontAwesome from 'react-native-vector-icons/FontAwesome'; import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import Home from './src/screens/Home'; import Following from './src/screens/Following'; import Add from './src/screens/Add'; import Groups from './src/screens/Groups'; import Profile from './src/screens/Profile'; import Loading from './src/screens/Loading'; import SignUp from './src/screens/SignUp'; import Login from './src/screens/Login'; import React, {Component} from 'react'; const MainTabs = createBottomTabNavigator( { Home: { screen: Home, navigationOptions: { tabBarLabel: "HOME", tabBarIcon: ({ tintColor }) => ( <FontAwesome name="home" color={tintColor} size={24} /> ) } }, Following: { screen: Following, navigationOptions: { tabBarLabel: "FOLLOWING", tabBarIcon: ({ tintColor }) => ( <FontAwesome5 name="user-friends" color={tintColor} size={24} /> ) } }, Add: { screen: Add, navigationOptions: { tabBarLabel: () => null, tabBarIcon: () => ( <Ion name="ios-add-circle" color="white" size={50} /> ) } }, Groups: { screen: Groups, navigationOptions: { tabBarLabel: "GROUPS", tabBarIcon: ({ tintColor }) => ( <MaterialIcons name="group-work" color={tintColor} size={30} /> ) } }, Profile: { screen: Profile, navigationOptions: { tabBarLabel: "PROFILE", tabBarIcon: ({ tintColor }) => ( <FontAwesome5 name="user-circle" color={tintColor} size={24} /> ) } }, }, { tabBarOptions: { activeTintColor: "white", inactiveTintColor: "#CFC8EF", style: { backgroundColor: "#2C2061", borderTopWidth: 0, shadowOffset: { width: 5, height: 3 }, shadowColor: "black", shadowOpacity: 0.5, elevation: 5 } } }, ); const switchNavigator = createSwitchNavigator( { Loading, SignUp, Login, MainTabs}, { initialRouteName: "Loading" } ); const App = createAppContainer(switchNavigator); export default App;

Answer 1

尝试自动绑定this ES6 方法，

  componentDidMount = () => { // changes are here
    firebase.auth().onAuthStateChanged((user)=> { // changes are here
      console.log(user)
      if (user) {
        console.log('user is signed in')
      } else {
        console.log('user is not signed in')
        this.props.navigation.navigate('SignUp')

      }
    });

  }

如果错误仍然存​​在，这在逻辑上不应该，但如果尝试这个，

import {withNavigation} from 'react-navigation';

...
class Loading extends React.Component{
...
...
...
}
export default withNavigation(Loading)