当我找到JWT时,如何导航一次?

时间:2018-05-15 13:57:25

标签: javascript reactjs react-native react-navigation

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

App.js

.....
def setup() {
..
    mockDomain(MyObject,[
          [
            action : 'ACT1',
            reason : 'REAS1',
            description : 'First reason'
          ],
          [
            action : 'ACT2',
            reason : 'REAS2',
            description : 'Second reason'
          ]
     ])

     def myObject = MyObject.first()

}
...

RootContainer.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>
    );
  }
}

WelcomeScreen.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>
    );

  }
}

1 个答案:

答案 0 :(得分:1)

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

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

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