Naviguer après la connexion

Question

Je suis en train de créer une application en utilisant React-Native. J'ai ajouté Firebase Auth à mon application, mais je ne peux pas naviguer vers l'écran d'accueil après la connexion. Voici mon code :

Constructeur (dans LoginScreen) :

  constructor(props){
    super(props)
    this.state = {
      email: '',
      password: '',
      status: '',
    }

    this.handlePress = this.handlePress.bind(this)
  }

app.js :

import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';

import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';

const Stylelist = StackNavigator({
  Login: { screen: LoginScreen },
  Register: { screen: RegisterScreen},
  Home: {screen: HomeScreen},
},{headerMode: "none"});

export default Stylelist;

fonction handlePress(fonction dans l'écran de connexion) :

handlePress(){
  firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
    //Success, move to homepage.
    console.log("logged in!")
    navigate("Home")
  }).catch(function(error){
    //Failed to log in, print error.
  });
}

Ce "logged in" s'affiche dans la console mais ne s'affiche pas sur l'écran d'accueil.

c'est la méthode de rendu dans le loginScreen.js :

import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, KeyboardAvoidingView, TextInput, StatusBar, Image } from 'react-native';
import { firebaseRef } from '../services/Firebase';

export default class LoginScreen extends Component{

  constructor(props){
    super(props)
    this.state = {
      email: '',
      password: '',
      status: '',
    }

    this.handlePress = this.handlePress.bind(this)
  }

  //Trying to login the account with email and password provided by the user.
  handlePress(){
    firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
      //Success, move to homepage.
      console.log("logged in!")
      this.props.navigation.navigate("Home");
    }).catch(function(error){
      //Failed to log in, print error.
    });
  }
  render(){
    const { navigate } = this.props.navigation;
    return(
      <KeyboardAvoidingView behavior="padding" style={styles.container}>
      <StatusBar
      barStyle="light-content"
      />
      <View style={styles.logoContainer}>
      <Image
      style={styles.logo}
      source={require('../assets/Logo.png')}/>
      </View>
      <View style={styles.formContainer}>
      <TextInput
      style={styles.txtInput}
      keyboardType="email-address"
      placeholder="email"
      onChangeText={(text)=> this.setState({email: text})}
      placeholderTextColor="#FFFFFF"
      onSumbitEditing={()=>this.passwordInput.focus()}
      returnKeyType="next"
      autoCapitalize="none"
      autoCorrect={false}
      />
      <TextInput
      style={styles.txtInput}
      placeholder="password"
      placeholderTextColor="#FFFFFF"
      onChangeText={(text)=> this.setState({password: text})}
      returnKeyType="go"
      autoCapitalize="none"
      autoCorrect={false}
      secureTextEntry
      ref={(input)=>this.passwordInput = input}
      />
      <TouchableOpacity style={styles.logBtn} onPress={this.handlePress}>
      <Text style={styles.logTxt}>
      Login
      </Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.regBtn} onPress={()=>navigate("Register")}>
      <Text style={styles.regTxt}>
      create account
      </Text>
      </TouchableOpacity>
      </View>
      </KeyboardAvoidingView>
    );
  }
}

Je n'obtiens pas d'erreur imprimée et l'application ne plante pas, qu'est-ce que je fais mal ?

Answer 1

Je pense que vous manquez le contexte de la promesse et navigate n'existe plus là-bas. Passons donc un paramètre à la callback de la navigation pour que cela fonctionne :

Tout d'abord, ajoutez navigate comme paramètre à handlePress

handlePress(navigate){
  firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
    //Success, move to homepage.
    console.log("logged in!")
    navigate("Home");
  }).catch(function(error){
    //Failed to log in, print error.
  });
}

Deuxièmement, modifiez le TouchableOpacity pour appeler handlePress correctement :

...
<TouchableOpacity style={styles.logBtn} onPress={() => this.handlePress(navigate)}>
  <Text style={styles.logTxt}>
    Login
  </Text>
</TouchableOpacity>
...

Answer 2

Je n'ai pas vu la partie où vous appliquez handlePress(), mais peut-être y a-t-il des paramètres à analyser pour naviguer autres que le nom de la route ?