Wie berechtige ich Benutzer über die react-navigation App?

Question

Ich habe 2 Gruppen von Bildschirmen in meiner App.

1) AuthorizedScreens

2) NotAuthorizedScreens

Sobald die App lädt ich überprüfen möchten, ob der Benutzer angemeldet ist oder nicht ist? Wenn der Benutzer angemeldet ist, lädt die App AuthorizedScreens und wenn nicht, lädt es NotAuthorizedScreens. Wie erreiche ich das? Ich habe eine Probe von nicht funktioniert Code enthalten, aber ich denke, das ist, wie es sein könnte!

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> 

    ); 
    } 
} 

Hinweis! Ich habe einen Aktion Schöpfer, dass, wenn der Benutzer überprüft wird, angemeldet. Aber ich konnte es nicht auf die App Komponente verbinden, deshalb habe ich mich entschlossen AsyncStorage zu verwenden, um eine facebook_token zu speichern, und wenn die Token bestehen Mittel Benutzer angemeldet, und wenn der Benutzer nicht ... ist

"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

ich dieses Problem durch gelöst haben einen Zustand in componentWillMount Einstellung und von Rückkehr aufrufen.

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> 

    ); 
    } 
} 

Ich habe dieses Problem gelöst, aber ich bin nicht sicher, ob ich es richtig gemacht haben! Weil, Redux ist verantwortlich für meine State-Management, aber ich habe manuell die Reaktion State-Management durch Setzen von Zustand.

Ich werde Ihre Eingaben zu schätzen wissen, wenn Sie eine besser Weg wissen.