Question

我的应用中有两组屏幕。

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>

    );
  }
}

注意！ 我有操作创建者，用于检查用户是否已登录。但我无法将其连接到 App 组件，因此我决定使用 AsyncStorage 存储facebook_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 中设置状态并从返回调用它来解决此问题。

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-navigation应用程序中授权用户？

1 个答案: