当我找到JWT时，如何导航一次？

I am just getting stuck into react-native and need some help navigating to a protected screen when a token is found. Where should I look for a token on app load? And how can I navigate the user once without calling navigate multiple times? The problem I have is I am checking for a token on component mount, which is nested inside a stack. If I navigate to another part of the stack, the function is called again and I am unable to navigate. I can retrieve the token outside of the stack, but then I am having trouble navigating, as I need to pass props.navigate within a screen component. What is the recommended approach to finding a token, and making a navigation?

我刚刚陷入react-native，当找到令牌时需要一些帮助导航到受保护的屏幕。我应该在应用程序加载的哪个位置查找令牌？如何在不多次调用导航的情况下导航用户一次？我遇到的问题是我正在检查组件挂载上的令牌，它是嵌套在堆栈中的。如果我导航到堆栈的另一部分，则再次调用该函数，我无法导航。我可以在堆栈外检索令牌，但后来导航时遇到问题，因为我需要在屏幕组件中传递props.navigate。找到令牌和进行导航的推荐方法是什么？

App.js

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

...

  render() {

    const MainNavigator = createBottomTabNavigator({
      welcome: { screen: WelcomeScreen },
      auth: { screen: AuthScreen },
      main: {
        screen: createBottomTabNavigator({
          map: { screen: MapScreen },
          deck: { screen: DeckScreen },
          review: {
            screen: createStackNavigator({
              review: { screen: ReviewScreen },
              settings: { screen: SettingsScreen }
            })
          }
        })
      }
      // Route Configuration for Initial Tab Navigator
    }, {
      // do not instantly render all screens
      lazy: true,
      navigationOptions: {
        tabBarVisible: false
      }
    });

    return (
      <View style={styles.container}>
        <MainNavigator />
      </View>
    );

  }
}

WelcomeScreen.js

...

componentDidMount(){
  this.props.checkForToken(); // async method 
}

// Async Action 
 export const checkForToken = () => async dispatch => {
   console.log("action - does token exist ?");
   let t = await AsyncStorage.getItem("jwt");
   if (t) {
     console.log("action - token exists");
     // Dispatch an action, login success
     dispatch({ type: LOGIN_SUCCESS, payload: t });
   } else {
     return null;
   }
 }

// WelcomeScreen.js continued

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

authComplete(props){
  if(props.token){
    props.navigation.navigate('map'); // called again and again when I try to navigate from within the Bottom Tab Bar Component 
  }
}

render(){
  if(this.props.appLoading){ // default True 
    return ( <ActivityIndicator />);
  }
  return ( <Text>WelcomeScreen</Text> );
}

const mapStateToProps = state => {
  return {
    token: state.auth.token,
    appLoading: state.auth.appLoading // default True 
  };
};

export default connect(mapStateToProps, actions)(WelcomeScreen);

1 个解决方案

#1

I would suggest, not to store navigation state in redux. Just navigate when you found a token or the user logged in.

我建议，不要在redux中存储导航状态。只需在找到令牌或用户登录时进行导航即可。

If you still want to use redux or simply want to react on props changes, then the way is to use some Redirect Component, and render it only when the token changed from nothing to something. You could read about such implementation from react-router here. I think there is no such implementation for React Navigation.

如果您仍然想使用redux或者只是想对props更改做出反应，那么方法是使用一些Redirect Component，并仅在令牌从无变化时呈现它。你可以在这里从react-router了解这种实现。我认为React Navigation没有这样的实现。

When you are using React Navigation, then I would suggest to look into the docs, because I think it solves the problem you have. https://reactnavigation.org/docs/en/auth-flow.html

当您使用React Navigation时，我建议您查看文档，因为我认为它可以解决您遇到的问题。 https://reactnavigation.org/docs/en/auth-flow.html

#1