react-navigation TypeError 未定义错误

Question

我正在使用本机反应，现在当我尝试安装加载组件时出现以下错误。

类型错误：未定义不是对象（评估“this.props.navigation.navigate”）

这是我的代码

import React from 'react';
import SplashScreen from 'react-native-splash-screen';
import Loading from '../../components/loading/Loading';
import { connect } from 'react-redux';

class LoadingContainer extends React.Component {
   componentDidMount() {
      setTimeout(() => {
         SplashScreen.hide();
      }, 300);
      let initRoute;
      if (this.props.auth.user) {
         initRoute = 'App';
      } else {
         initRoute = 'Login';
      }
      this.props.navigation.navigate(initRoute);
   }

   render() {
      return <Loading navigation={this.props.navigation} />;
   }
}

const mapStateToProps = state => ({
   auth: state.auth,
});

export default connect(mapStateToProps, null)(LoadingContainer);

我是第一次在使用 react-navigation 时遇到这个错误，我使用的是 react navigation 的 2.11.2 版本

Answer 1

为什么不使用 react-navigation v4.x？

对于 v2.x，您的导航配置可能是这样的

import React from 'react';
import { createStackNavigator } from 'react-navigation';
import LoadingContainer from '../containers/LoadingContainer/LoadingContainer';
import Login from '../containers/LoginContainer/Login';

const AppStack = createStackNavigator(
    {
        Loading: LoadingContainer,
        Login: Login,
    },
    {
        initialRouteName: 'Loading',
    }
);

export default class App extends React.Component {
    render() {
        return <AppStack />
    }
}