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)