React native - verhindern, dass Benutzer zum Login-Bildschirm zurückkehren

Question

Ich habe eine Login-Schaltfläche mit Facebook SDK erstellt. Sobald der Benutzer angemeldet ist, navigiert die App zum zweiten Bildschirm (NavigatorIOS). Von diesem zweiten Bildschirm aus kann der Benutzer mit der Navigation (Zurück-Schaltfläche) zum Anmeldebildschirm zurückkehren.

Wie kann ich verhindern, dass der Benutzer zum Anmeldebildschirm zurückkehrt, wenn er bereits angemeldet ist?

index.ios.js

import React, { Component } from 'react' 

import { 
    AppRegistry, 
    StyleSheet, 
    NavigatorIOS 
} from 'react-native' 

import LoginView from './src/login-view' 

class MyApp extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <NavigatorIOS 
      initialRoute={{ 
      component: LoginView, 
      title: 'MyApp', 
      index: 0 
      }} 
     /> 
     </Provider> 
    ); 
    } 
} 
AppRegistry.registerComponent('MyApp',() => MyApp); 

Loginview

import React, {Component} from 'react' 
import { 
    View, 
    Text, 
    StyleSheet, 
    TouchableHighlight, 
} from 'react-native' 

import CategoryView from './category-view' 

import {LoginButton, AccessToken, GraphRequest, GraphRequestManager} from 'react-native-fbsdk' 

class LoginView extends Component { 
    goToCategoryView =() => 
     this.props.navigator.push({ 
      title: 'Categories', 
      component: CategoryView, 
     }) 

    render(){ 
     return(
      <View style={styles.container}> 
       <LoginButton 
        readPermissions={['public_profile','email']} 
        onLoginFinished={ 
         (error, result) => { 
          if (error) { 
           console.log('login has error: ', result.error) 
          } else if (result.isCancelled) { 
           console.log('login is cancelled.') 
          } else { 
           AccessToken.getCurrentAccessToken().then((data) => {  
            this.goToCategoryView() 
           }) 
          } 
         } 
        } 
        onLogoutFinished={() => {console.log('logged out')}} /> 
      </View> 
     ) 
    } 
} 

export default LoginView 

Answer 1

Mit dem Navigator können Sie die Methode resetTo(startingRoute) verwenden, um den Stapel zurückzusetzen und einen neuen aus der Route zu starten, die Sie als Vergangenheit hatten ein Parameter Dadurch verhindern Sie, dass Sie im Stapel zurück navigieren.

Wenn ich nicht Ihre Komponente Mißverständnis, sollten Sie etwas wie folgt verwenden:

goToCategoryView =() => { 
    //Replace here push with resetTo 
    this.props.navigator.resetTo({ 
     title: 'Categories', 
     component: CategoryView, 
    }) 
} 

Facebook Docs

Answer 2

Wie wäre es pop() der Login-Bildschirm aus, auf den ersten, dann drücken Sie() den neuen Bildschirm oder ersetzen versuchen() [https://facebook.github.io/react-native/docs/navigator.html]

Noch eine Sache, sollten Sie eine Überprüfung auf dem Anmeldebildschirm, um zu sehen, ob der Benutzer angemeldet ist und Abmeldung statt Anmeldung anzeigen. (Wenn Sie redux verwenden, um das Benutzer-Token zu speichern, können Sie überprüfen, ob das Token existiert und noch gültig ist)