未定义不是对象('this.props.navigation.navigate')错误

Question

这是我的代码页ProfileInfo：

import React from "react";
import { View, Text, StyleSheet, ActivityIndicator } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import RegisterTextBox from "../../components/RegisterTextBox";
import AuthButton from "../../components/AuthButton";
import Avatar from "../../components/Avatar";
import firebase from "../../util/firebase";
import { setPhone, setIsProfileFilled } from "../../util/database";

export default class PersonalInfo extends React.Component {
  constructor(props) {
    super(props);
    this.updateUser = this.updateUser.bind(this);
    this.state = {
      displayName: "",
      phoneNumber: "",
      photoURL: "",
      buttonColor: "#8b898a",
      isLoading: false,
    };
  }

  updateInputVal = (val, prop) => {
    this.setState({ [prop]: val });
    this.changeColor();
  };

  changeColor() {
    let currentColor = this.state.buttonColor;
    if (this.state.displayName != "" && this.state.phoneNumber != "") {
      currentColor = "#7356bf";
    } else currentColor = "#8b898a";
    this.setState({ buttonColor: currentColor });
  }

  updateUser() {
    this.setState({ isLoading: true });
    var user = firebase.auth().currentUser;
    user
      .updateProfile({
        displayName: this.state.displayName,
        photoURL: this.state.photoURL,
        phoneNumber: setPhone(user.uid, this.state.phoneNumber),
      })
      .then(function () {
        // Update successful.
        console.log("Update Succed Moving to Update User Is Filled");
      })
      .then(() => {
        user.updateProfile({
          displayName: setIsProfileFilled(user.uid, true),
        });
        console.log("Update Succed Is Filled");
        this.setState({ isLoading: false });
      })
      .catch(function (error) {
        // An error happened.
        console.log(error);
        this.setState({ isLoading: false });
      });
    this.props.navigation.navigate("Waiting");
  }

  render() {
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.title}>Great! Let’s get to know YOU</Text>
        </View>
        <View style={styles.imageContainer}>
          <Avatar />
        </View>
        <View style={styles.inputContainer}>
          <RegisterTextBox
            type="name"
            style={styles.emailInput}
            placeholder="Your Name"
            value={this.state.displayName}
            onChangeText={(name) => {
              this.updateInputVal(name, "displayName");
            }}
          />
          <RegisterTextBox
            type="number"
            style={styles.emailInput}
            placeholder="Phone Number"
            value={this.state.phoneNumber}
            onChangeText={(number) =>
              this.updateInputVal(number, "phoneNumber")
            }
          />
        </View>
        <View style={styles.buttonContainer}>
          <AuthButton
            style={{ backgroundColor: this.state.buttonColor }}
            // CR: Use Disabled property instead of changing the style
            // disabled
            title="Continue"
            onPress={this.updateUser}
            text="Continue"
          ></AuthButton>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  //Containers
  container: {
    flex: 1,
  },
  titleContainer: {
    height: hp(10),
    width: wp(65.7),
    alignItems: "center",
    marginLeft: wp(17.4),
    marginRight: wp(17.4),
    marginTop: hp(12.7),
  },
  inputContainer: {
    marginTop: hp(6),
    width: wp(65.2),
    alignItems: "center",
    marginLeft: wp(17.4),
    marginRight: wp(17.4),
  },
  imageContainer: {
    marginTop: hp(7.3),
    alignItems: "center",

    height: hp(14.4),
    width: wp(100),
  },
  buttonContainer: {
    marginTop: hp(9),
    marginBottom: hp(14.1),
    alignItems: "center",
  },
  //Button
  loginButton: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 32.5,
    width: wp(78.3),
    height: hp(7.3),
    backgroundColor: "grey",
  },
  //Text
  title: {
    flex: 1,
    textAlign: "center",
    fontSize: hp(3.8),
  },
});

这是我的导航器：

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";

//Screens
import Splash from "../screens/Auth/Splash";
import Login from "../screens/Auth/Login";
import Register from "../screens/Auth/Register";
import PersonalInfo from "../screens/Auth/PersonalInfo";
import Waiting from "../screens/Waiting";

const Stack = createStackNavigator();
export const AuthStack = () => {
  return (
    <Stack.Navigator initialRouteName="Splash">
      <Stack.Screen
        name="Splash"
        component={Splash}
        options={{ headerShown: false, headerTransparent: true }}
      />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen
        name="Register"
        component={Register}
        options={{ headerTransparent: true, headerTitle: "" }}
      />
      <Stack.Screen
        name="PersonalInfo"
        component={PersonalInfo}
        options={{ headerTitle: "", headerTransparent: true }}
      />
      <Stack.Screen
        name="Waiting"
        component={Waiting}
        options={{ headerTitle: "", headerTransparent: true }}
      />
    </Stack.Navigator>
  );
};

我不明白为什么导航是未定义的，我尝试在updateuser完成后导航。我也尝试了navigation.navigate("Waiting");仍然没有运气，我不知道为什么它不能识别我的导航器，其他页面只在这一个上工作正常我有问题，可能是我的功能有问题？

Answer 1

我创建了一个类，可以在没有道具的情况下从任何地方导航。如果你愿意，你可以用我的课程。首先，您必须设置顶级导航。

在我的NavigationService.js

import { NavigationActions } from 'react-navigation';

class NavigationService{
    _navigator = null;
    currentRoute = null;
    isNavigated = false;

    setTopLevelNavigator(navigatorRef) {
        _navigator = navigatorRef;
      }
      
    navigate(routeName, params) {
        _navigator.dispatch(
          NavigationActions.navigate({
            type: NavigationActions.NAVIGATE,
            routeName,
            params,
          })
        );
      }

      setCurrentRoute(routName){
        this.currentRoute = routName;
      }

      setNavigated(status){
        this.isNavigated = status;
      }
}




// add other navigation functions that you need and export them

const Navigation = new NavigationService();

export default Navigation;

如何使用？

import Navigation from './NavigationService';

const AFunction = () => {
    Navigation.navigate('screenKey', {/* Your params */})
}