Question

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

构造函数（在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;

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

此＆＃34;已登录＆＃34;确实会在控制台中打印，但不会移动到主屏幕。

这是loginScreen.js中的render方法：

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

我认为你错过了承诺中的上下文，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>
...

Answer 2

没有看到你应用handlePress（）的部分，但也许有一些params需要解析才能导航到路由名称之外？

登录后导航

2 个答案: