导航在本机应用程序中不起作用答案

【问题标题】：Navigation not working in react native app导航在本机应用程序中不起作用
【发布时间】：2019-02-06 16:24:26
【问题描述】：

我正在开发一个带有 firebase 身份验证的 react 本机应用程序。但是当我成功登录时，导航显示了一些问题，例如，未定义不是对象（评估“this.props.navigation”）。但用于导航的相同锥体在其他页面上正常工作。我尝试了很多东西，但没有任何效果，请大家帮帮我。

      import React from "react";
      import {
        Text,
        View,
        Image,
        TouchableOpacity,
        AsyncStorage,
        TextInput
      } from "react-native";
      import { styles } from "./Css";
      import { KeyboardAvoidingView } from "react-native";
      import { RkTextInput, RkButton } from "react-native-ui-kitten";
      import { Actions } from "react-native-router-flux";
      import { Icon } from "react-native-elements";

      import * as firebase from "firebase";
      export default class Login extends React.Component {
        constructor(props) {
          super(props);

          this.state = {
            email: "",
            password: "",
            userId: "",
            errorMessage: null,
          };
        }
        componentDidMount() {
          this._loadInitialState().done();
        }
        _loadInitialState = async () => {
          var value = await AsyncStorage.getItem("user");

          if (value !== null) {
            this.props.navigation.navigate("NewHome")
          }
        };

        handleLogin = (email, password) => {
          if(this.state.email.length<1){
            alert("Enter an Email");
            return;
          }

          if (this.state.email.includes("@")==false){
              alert("Use an email as Username");
              return;
            }

          if(this.state.password.length<6){
            alert("please enter correct password")
            return;
          }

          //alert(firebase.auth().currentUser.uid)
          firebase.auth().signInWithEmailAndPassword(email, password).then(function(user){
            if(user){
              this.props.navigation.navigate("NewHome"), //problem
              //--------------------------Async Test--------------------------
              AsyncStorage.setItem("user", firebase.auth().currentUser.uid)
              //--------------------------------------------------------------
            }else{

            }
          }


            )
            .catch(function(error) {
              var errorCode = error.code;
              var errorMessage = error.message;

              if (errorCode === "auth/wrong-password") {
                alert("Wrong password.");
                return;
              } else {
                alert(errorMessage);
                return;
              }
              console.log(error);
            });
        };

【问题讨论】：

你调试过你的代码吗？调试错误和输出是什么？ stackoverflow.com/a/45227393/1848929
几个问题：这个登录屏幕是在 StackNavigator 中吗？在你的构造函数中你正在做'navigation = this.props.navigation'如果你取出'this.props'并将'navigation'传递给你的auth方法会发生什么？
@kivul 实际上是我忘记删除的 contsrtuctor 东西。那什么也没做。现在我删除了它，请现在检查代码。我使用的导航器是 SwitchNavigator
我认为您的 this 不再指向您的 React 类。您是否尝试过箭头功能？
是的，我的意思是这样的：firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {...。如果这没有帮助，您可以尝试将 this.props.navigation 传递给该行正上方的变量并使用它进行导航（就像您在构造函数中所做的那样）？

标签： reactjs firebase react-native navigation

【解决方案1】：

this 不再指向您的 React 类。

解决方案可能是使用箭头函数：

firebase.auth().signInWithEmailAndPassword(email, password).then((user) => {...}

或者您必须先将其保存在您的函数中，然后才能在 firebase 回调中使用它。

let props = { ...this.props };

在你的回调中使用它来导航：

props.navigation.navigate('NewHome');

【讨论】：