7

Mein Ziel ist es, den Benutzer an die Home Komponente umzuleiten, wenn der Benutzer bereits angemeldet ist. Ich kann einen Benutzer anmelden und nur an Home umleiten, wenn _logInUser() aufgerufen wird . Wenn ich den Simulator jedoch einmal auf die Komponente Home umgeleitet habe, geht die App zurück zur Komponente Login.React Native - Umleiten des angemeldeten Firebase-Benutzers an Home Component

Ich versuchte, dies zu lösen mit componentWillMount() und Einstellung let user = firebaseApp.auth().currentUser. Allerdings loggte ich sogar die user auf der Konsole, aber es scheint, als ob die if Überprüfung direkt auf die else Anweisung geht. Ich würde jede Einsicht schätzen!

Hier ist mein Code (I react-native-router-flux für das Routing bin mit):

index.ios.js

import React, { Component } from 'react'; 
import { Scene, Router } from 'react-native-router-flux'; 
import { 
    AppRegistry, 
} from 'react-native'; 

// Components 
import Login from './components/user/login/login'; 
import Home from './components/user/home/home'; 

class AppName extends Component { 
    render() { 
    return (
     <Router> 
     <Scene key="root"> 
      <Scene key="login" component={Login} title="Login" hideNavBar={true} initial={true}/> 
      <Scene key="home" component={Home} title="Home"/> 
     </Scene> 
     </Router> 
    ); 
    } 
} 


AppRegistry.registerComponent('AppName',() => AppName); 

login.js

import React, { Component } from 'react'; 
import { 
    AlertIOS, 
    Dimensions, 
    Image, 
    ScrollView, 
    StyleSheet, 
    Text, 
    TextInput, 
    TouchableOpacity, 
    View 
} from 'react-native'; 

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; 
import { Actions } from 'react-native-router-flux'; 

import firebaseApp from 'AppName/firebase_setup'; 

// Set width and height to screen dimensions 
const { width, height } = Dimensions.get("window"); 

// For Firebase Auth 
const auth = firebaseApp.auth(); 

// Removed styles for StackOverflow 

export default class Login extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     email: '', 
     password: '' 
    } 
    } 

    componentWillMount() { 
    let user = auth.currentUser; 
    if (user != null) { 
     console.log(user); 
     Actions.home 
    } else { 
     return; 
    } 
    } 

    render() { 
    return (
     <View style={styles.mainContainer}> 
     <KeyboardAwareScrollView 
      style={styles.scrollView} 
      keyboardShouldPersistTaps={false} 
      automaticallyAdjustContentInsets={true} 
      alwaysBonceVertical={false} 
     > 
      <View style={styles.loginContainer}> 

      <View style={styles.inputContainer}> 

       <TextInput 
       style={styles.formInput} 
       placeholder="Email" 
       keyboardType="email-address" 
       autoFocus={true} 
       autoCorrect={false} 
       autoCapitalize="none" 
       onChangeText={(email) => this.setState({email})} 
       /> 

       <TextInput 
       style={styles.formInput} 
       secureTextEntry={true} 
       placeholder="Password" 
       autoCorrect={false} 
       autoCapitalize="none" 
       onChangeText={(password) => this.setState({password})} 
       /> 

       <TouchableOpacity 
       style={styles.loginButton} 
       onPress={this._logInUser.bind(this)} 
       > 
       <Text style={styles.loginButtonText}>Log In</Text> 
       </TouchableOpacity> 

       <TouchableOpacity> 
       <Text style={styles.toSignupButton}>Dont have an account? Create one!</Text> 
       </TouchableOpacity> 

      </View> 
      </View> 

      <View style={styles.footer}> 
      <Text style={styles.footerText}> 
       By signing up, I agree to TextbookSwap's <Text style={styles.footerActionText}>Terms of Service</Text> and <Text style={styles.footerActionText}>Privacy Policy</Text>. 
      </Text> 
      </View> 
     </KeyboardAwareScrollView> 
     </View> 
    ); 
    } 

    _logInUser() { 
    let email = this.state.email; 
    let password = this.state.password; 

    auth.signInWithEmailAndPassword(email, password) 
     .then(Actions.home) 
     .catch((error) => { 
     AlertIOS.alert(
      `${error.code}`, 
      `${error.message}` 
     ); 
     }); 
    } 
} 
+0

Entschuldigung, ich habe keine vollständige Antwort für Sie. Aber ich glaube, dass die [Switch-Funktion] (https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md#switch-new-feature) hier nützlich sein könnte. –

Antwort

5

Zuerst in Ihre Login-Komponente Sie überprüfen currentUser auf synchrone Weise, aber es könnte noch nicht nützen fähig bei componentWillMount. Sie können sollen asynchron erhalten in:.

firebase.auth().onAuthStateChanged(function(user) { 
    if (user) { 
    // User is signed in. 
    } else { 
    // No user is signed in. 
    } 
}); 

Höchstwahrscheinlich es genug sein wird Actions.home() anrufen, wenn Benutzer angemeldet ist jedoch, wie Ihre Anwendung wächst man diese Logik auf von Login-Bildschirm bewegen mag. Wie Kyle vorgeschlagen hat, können Sie die Switch-Funktion verwenden. Es ist in der Regel (Zitat docs) verwendet mit redux, wie folgt aus:

const RootSwitch = connect(state => ({loggedIn: state.transient.loggedIn}))(Switch); 
const rootSelector = props => props.loggedIn ? 'workScreens' : 'authScreens'; 

const scenes = Actions.create(
    <Scene key="root" tabs={true} component={RootSwitch} selector={rootSelector}> 
    <Scene key="authScreens" hideNavBar={true}> 
     <Scene key="login" component={Login} initial={true}/> 
     <Scene key="register" component={Register} /> 
     ... 
    </Scene> 
    <Scene key="workScreens"> 
     <Scene key="home" component={Home} initial={true}/> 
     <Scene key="profile" component={ProfileMain}/> 
     ... 
    </Scene> 
    </Scene> 
); 

Wenn Sie nicht redux verwenden möchten, können Sie manuell wechseln wickeln statt mit reagieren-redux die Verbindung und übergeben LoggedIn zu wechseln prop . Beispielsweise können Sie in diesem Wrapper Firebase onAuthStateChanged hören, etwa so:

class FirebaseSwitch extends Component { 

    state = { 
    loggenIn: false 
    } 

    componentWillMount() { 
    firebase.auth().onAuthStateChanged(user => 
     this.setState({loggedIn: !!user}) 
    ); 
    } 

    render() { 
    return <Switch loggedIn={this.state.loggedIn} {...this.props}/>; 
    } 
} 
+0

Ich mag deine Lösung. Ich versuche, es ohne Redux zu implementieren, und ich bekomme diesen Fehler, der sagt, dass "Verbindung nicht definiert ist". Ist das eine Redux-Methode? Wie würde ich das ohne Redux machen? Ich habe die 'FirebaseSwitch'-Komponente erstellt und sie in meine' index.ios.js' importiert, wie Sie es vorgeschlagen haben. Danke noch einmal!!! – szier

+0

Ja, Verbindung ist von react-redux. In RootSwitch mit FirebaseSwitch in den Router-Szenen ersetzen. –

+0

Cool danke. Ich habe das gemacht, aber ich bin neugierig, wie 'rootSelector'' props.loggedIn' aufrufen kann, weil die anfängliche 'Szene', die beim Laden des Simulators geladen wird, immer die' authScreens' ist. – szier