这是我的代码页面，名为 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"); 仍然没有成功， 我不知道为什么它无法识别我的导航器，其他页面运行正常，只有这个页面有问题，也许我的函数有问题？