リアクションナビゲーションアプリでユーザーを認証するにはどうすればよいですか？

Question

私のアプリには2つの画面グループがあります。

1）

が

2）私は、ユーザーがログインされているかどうかチェックしたいアプリをロードするとすぐに

をNotAuthorizedScreens AuthorizedScreens？ユーザーがログインしている場合は、 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> 

    ); 
    } 
} 

注意！ 私はユーザーがログインしているかどうかを確認するアクションの作成者を持っている。しかし、私はので、私はfacebook_tokenを保存するためにAsyncStorageを使用することを決定し、のAppコンポーネントに接続できませんでした、とトークンが存在する場合ユーザーがログインしていることを意味していないユーザーが

"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は私の状態管理を担当していますが、状態を設定して手動で反応状態管理を使用しました。

あなたがをよく知っていれば、あなたのご意見をお待ちしております。です。