Zum Startbildschirm navigieren, wenn Token reactive-native o.w. Login-Bildschirm

Question

Es ist schon einige Tage her, an denen ich an einem Punkt feststecke, an dem ich als Anfänger nicht sicher bin, wie ich es angehen soll. In meinem routes/main.js habe ich diesen Stapel Navigation:

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/> 
     ); 
    } 
} 

In root.jslet RootNavigation = createRootNavigator(true); derzeit true wird geleitet wird, jedoch kann es true or false sein, was ich AsyncStorage.getItem('authToken'); ich erreichen lassen soll mit

So etwas wie dies in meinem root.js

Hinweis: Below-Code ist falsch, aber es wird erklärt, was Ich will.

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/> 
     ); 
    } 
} 

Wie kann diese Funktionalität erreicht werden? Ich verwende react-redux und react-thunk in meinem Projekt. Bitte helfen Sie !!

Answer 1

Anstatt unterschiedliche RootNavigations zu rendern, je nachdem, ob der Benutzer angemeldet ist oder nicht. Sie können Ihren Stack mit einem Begrüßungsbildschirm initialisieren, der überprüft, ob ein authentifizierter Benutzer vorhanden ist. Da Sie Redux verwenden, könnte ein geeigneter Ort zum Speichern dieser Informationen in Ihrem Geschäft sein.

Sobald Ihr Begrüßungsbildschirm aktiviert ist und Sie asynchron festgestellt haben, ob ein aktiver Benutzer vorhanden ist oder nicht, können Sie zum Anmeldebildschirm oder zum ersten authentifizierten Bildschirm wechseln.

Kopfzeilen auf Bildschirmen, die sich ändern, je nachdem, ob ein Benutzer bei Authentifizierung oder nicht mit der statischen Methode "navigationOptions" konfiguriert wird, anstatt sie auf dem Stapel zu konfigurieren.

Hoffe, dass hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.