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',
  }
})

App.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

尝试ES6方法，该方法自动绑定this，

  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)