无法从 RootContainer 导航答案

【问题标题】：Unable to navigate from RootContainer无法从 RootContainer 导航
【发布时间】：2018-05-12 14:26:59
【问题描述】：

在我的 App.js 文件中，我有一个由 Provider 标签包裹的 RootContainer。

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import RootContainer from './screens/RootContainer';

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    );
  }
}

在 RootContainer 中，我呈现 MainNavigator，并且我还使用令牌操作检查 AsyncStorage。如果有令牌，我想导航到另一个我遇到问题的屏幕。

import actions, connect, createBottomTabNavigator, etc.

class RootContainer extends Component {
  constructor(props){
    super(props);
  }

  componentWillMount() { this.props.checkForToken(); } // dispatch async action, success, token found 

  componentWillReceiveProps(nextProps) { this.authComplete(nextProps); }

  authComplete(props) {
    if(props.token) { // success, token exists 
      props.navigation.navigate('map'); // undefined is not an object (evaluating 'props.navigation.navigate')
// this.props.navigation.navigate('map); does not work either.
    }
  }

  render() { 
    return ( <MainNavigator /> ); // loads fine when navigation route is commented out 
  }

}

const mapStateToProps = state => { return { token: auth.state.token } };
export default connect(mapStateToProps, actions)(RootContainer);

我做错了什么？？

【问题讨论】：

标签： reactjs react-native redux react-navigation

【解决方案1】：

想通了

我试图在 RootContainer 内调用 this.props.navigation.navigate，但 this.props.navigation 仅在屏幕组件内可用。

解决方案 - 将 checkForToken 逻辑移动到屏幕组件而不是 RootContainer。中提琴！

【讨论】：