如何在反應導航應用程序中授權用戶？

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> 

    ); 
    } 
} 

注意！ 我有一個行動的創建者，檢查用戶是否登錄。但我不能把它連接到應用成分，因此我決定用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負責我的狀態管理，但是我通過設置狀態手動使用了反應狀態管理。

如果您知道更好方式，我將不勝感激。