トークンが格納されている場合、ホーム画面にナビゲートする。react-native o.w.ログイン画面

Question

初心者の方が先に進む方法がわかりません。

export const createRootNavigator = (loggedIn = false) => { 
    return StackNavigator(
     { 
      LoggedIn: { 
       screen: LoggedIn 
      }, 
      LoggedOut: { 
       screen: LoggedOut 
      } 
     }, 
     { 
      headerMode: loggedIn ? '' : 'none', 
      mode: Platform.OS === 'ios' ? 'modal' : 'card', 
      initialRouteName: loggedIn ? "LoggedIn" : "LoggedOut" 
     } 
    ); 
    } 

App.js

import RootNavigation from './root'; 

const App =() => ({ 
    render() { 
    return (
     <Provider store = {store} > 
     <View style={styles.container}> 
      <RootNavigation/> 
     </View> 
     </Provider> 
    ); 
    } 
}) 

root.js

import React, {Component} from 'react'; 
import { AsyncStorage} from 'react-native'; 
import { createRootNavigator} from './src/routes/main'; 

let RootNavigation = createRootNavigator(true); 

export default class Root extends Component { 
    render() { 
     return ( 
      < RootNavigation/> 
     ); 
    } 
} 

root.js現在let RootNavigation = createRootNavigator(true);で：私のroutes/main.jsで は、私は、このスタックナビゲーターを持っていますtrue渡されている、しかし、それは私が私が私のroot.jsにこのような何かを達成

AsyncStorage.getItem('authToken');を使用して取得することになったtrue or falseかもしれ

注：コードの下が正しくありませんが、それは何の説明が欲しいです。

import React, {Component} from 'react'; 
import {AsyncStorage} from 'react-native'; 
import { createRootNavigator} from './src/routes/main'; 

// Not sure about the code placement of this part. 
let RootNavigation; 
let token = await AsyncStorage.getItem('authToken'); 
if(token) { 
    RootNavigation = createRootNavigator(true); 
}else { 
    RootNavigation = createRootNavigator(false); 
} 

export default class Root extends Component { 

    render() { 
     return ( 
      < RootNavigation/> 
     ); 
    } 
} 

どのようにこの機能を実現できますか？ 私のプロジェクトでreact-reduxとreact-thunkを使用しています。 助けてください！

Answer 1

ユーザーがログインしているかどうかに基づいて異なるルートルーティングをレンダリングする代わりに、あなたは、認証されたユーザーがいるかどうかをチェックするスプラッシュ画面でスタックを初期化することができます。あなたはreduxを使用しているので、この情報を保存する便利な場所があなたの店にあるかもしれません。

スプラッシュスクリーンがマウントされ、アクティブユーザーがあるかどうかを非同期で確認したら、ログイン画面または最初に認証された画面に移動できます。

ユーザーが認証されているかどうかに応じて変更される画面上のヘッダーは、静的なnavigationOptionsメソッドを使用してスタックに構成するのではなく、最もよく構成されます。

希望に役立ちます！ご質問がある場合はお知らせください。