react-native - 如何在 react 导航应用程序中授权用户？

Question

我的应用程序中有 2 组屏幕。

1) AuthorizedScreens

2) NotAuthorizedScreens

一旦应用加载，我想检查用户是否登录？如果用户已登录，则应用加载 AuthorizedScreens，如果未登录，则加载 NotAuthorizedScreens。我如何实现这一目标？我已经包含了一个不工作代码的示例，但我想这可能是这样!

App.js

import React from 'react';
import { AsyncStorage } from 'react-native';
import { Provider } from 'react-redux';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
import store from './store';

export default class App extends React.Component {

  async componentWillMount() {
    const token = await AsyncStorage.getItem('facebook_token');
  }

  render() {

    const AuthorizedScreens = DrawerNavigator(...

    const NotAuthorizedScreens = DrawerNavigator(...


    return (
      <Provider store={store}>
        { (this.token) ? <AuthorizedScreens /> : <NotAuthorizedScreens /> }
      </Provider>

    );
  }
}

注意!我有一个 action creator 检查用户是否登录。但我无法将它连接到 App 组件，因此我决定使用 AsyncStorage 存储一个 facebook_token，如果该 token 存在则表示用户已登录，如果不存在则用户未...

"dependencies": {
    "expo": "^20.0.0",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-20.0.0.tar.gz",
    "react-navigation": "^1.0.0-beta.11",
    "react-redux": "^5.0.6",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }

Answer 1

我通过在 componentWillMount 中设置状态并从return 调用它来解决这个问题。

import React from 'react';
import { AsyncStorage } from 'react-native';
import { Provider } from 'react-redux';
import { DrawerNavigator, StackNavigator } from 'react-navigation';
import store from './store';

export default class App extends React.Component {
  state = {
    login_token: '',
  };

  async componentWillMount() {
    const token = await AsyncStorage.getItem('facebook_token');
    this.setState({ login_token: token });
  }

  render() {

    const AuthorizedScreens = DrawerNavigator(...

    const NotAuthorizedScreens = DrawerNavigator(...


    return (
      <Provider store={store}>
        { (this.state.login_token) ? <AuthorizedScreens /> : <NotAuthorizedScreens /> }
      </Provider>

    );
  }
}

我已经解决了这个问题，但我不确定我的做法是否正确!因为，Redux 负责我的状态管理，但我通过设置状态手动使用 React 状态管理。

如果您知道更好的方法，我将不胜感激。