react-native - 登录后导航

Question

我正在使用 React-Native 创建一个应用程序。我将 Firebase Auth 添加到我的应用程序，但登录后无法导航到主屏幕。
这是我的代码:

构造函数(在 LoginScreen 中):

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

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

应用程序.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;

handlePress 函数(登录屏幕中的函数):

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

这个“登录”确实会打印在控制台中，但不会移动到主屏幕。

这是 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>
    );
  }
}

我没有打印任何错误，应用程序也没有崩溃，我做错了什么？

Answer 1

我认为您错过了 promise 中的上下文和 navigate那里不再存在。因此，让我们传递一个参数导航回调以使其工作:

首先，将navigate作为参数添加到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.
  });
}

其次，修改 TouchableOpacity 以正确调用 handlePress:

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