Question


    import React, { Component } from 'react';
    import MainNavigator from './src/navigation';
    import {connect} from 'react-redux';


    class Application extends Component {

      _checkToken(token){
        //TODO: Validate token!
         return true;
      }

      _isLoggedin(){
          if(this._checkToken(this.props.token)){
              MainNavigator.navigate('Home');
          }else{
              MainNavigator.navigate('Login');
          }
      }

      componentDidMount(){
        this._isLoggedin();
      }

      componentDidUpdate(){
          this._isLoggedin();
      }

      render() {
        return (
           MainNavigator 
        );
      }
    }

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

    export default connect(mapStateToProps)(Application);


    MainNavigator = SwitchNavigator({
        intro: {screen: introScreen},
        login: {screen: loginScreen},
        Home: {screen: homeScreen}
    });

我希望此组件（应用程序）负责将视图导航到正确的屏幕，具体取决于从redux / redux-persist检索的身份验证状态。我实现了这种方法，因为我希望用户能够关闭应用程序而无需再次登录。因此，当触发 componentDidUpdate 或 componentDidMount 时，我会检查存储令牌的有效性，并尝试根据该值进行导航。

我的问题是如何浏览 MainNavigator 的屏幕？该文档使用 this.props.navigation.navigate([ScreenName]) 解决了导航问题，但我不能在此处使用此方法。

提前谢谢！

Answer 1

您可以按照official documentation

中的说明创建NavigationService

只需创建一个新的NavigationService.js文件。

import { NavigationActions } from 'react-navigation';

let _navigatorRef;

function setNavigatorRef(navigatorRef) {
  _navigatorRef = navigatorRef;
}

function navigate(routeName, params) {
  _navigatorRef.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}

export default {
  navigate,
  setNavigatorRef,
};

在您的顶级组件中，您可以将导航器传递给您的服务。

import NavigationService from './NavigationService';

const MyNavigator = createStackNavigator({ bla bla bla })

class App extends React.Component {
  render() {
    return (
      <MyNavigator
        ref={navigatorRef => {
          NavigationService.setNavigatorRef(navigatorRef);
        }}
      />
    );
  }
}

现在，您可以使用此服务从顶级组件（例如App.js）进行导航。只需使用函数navigate（）。

NavigationService.navigate('LastScreen');

React-Navigation：声明时导航屏幕

1 个答案: