我在 React Native 中实现了 Stack Navigator，但它显示错误：“TypeError：无法读取未定义的正确‘navigate’”。令人惊讶的是，这对一个组件有效，但当我在另一个组件中使用相同的代码时，它显示上述错误。

import React from "react";
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { StyleSheet, Text, View } from "react-native";
import Home from "./components/Home";
import Rider from "./components/Rider";
import SplashScreen from "./components/SplashScreen";
import SignIn from "./components/SignIn";
import LogIn from "./components/LogIn";
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import rootReducer from './reducers/rootReducer'
import Login_sign_alert from "./components/Login_sign_alert";
const store=createStore(rootReducer)
const Drawer=createDrawerNavigator()

export default function App() {
  const Stack = createStackNavigator();
  return (
    <Provider store={store}>
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="SplashScreen"
        screenOptions={{
          headerStyle: {
            backgroundColor: "#009387",
          },
          headerTintColor: "#fff",
          headerTitleStyle: {
            fontWeight: "bold",
          },
        }}
      >
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Rider" component={Rider} />
        <Stack.Screen
          name="SplashScreen"
          component={SplashScreen}
          options={{ headerShown: false }}
        />
        
        <Stack.Screen
          name="LogIn"
          component={LogIn}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="SignIn"
          component={SignIn}
          options={{ headerShown: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
    </Provider>
  );
}

这是我的 App.js 文件。

import { StatusBar } from "expo-status-bar";
import React from "react";
import { LinearGradient } from "expo-linear-gradient";
import { Entypo } from "@expo/vector-icons";
import {
  StyleSheet,
  Text,
  View,
  Dimensions,
  Image,
  TouchableOpacity,
} from "react-native";
const { height } = Dimensions.get("screen");
const height_logo = height * 0.4;
export default function SplashScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Image
          source={require("../assets/logo.png")}
          resizeMode="stretch"
          style={styles.logo}
        />
      </View>
      <View style={styles.footer}>
        <Text style={styles.footer_header}>Expert Knowledge Transfer!</Text>
        <Text style={styles.footer_text}>Sign In With Account.</Text>
        <TouchableOpacity
          style={styles.button}
          onPress={() => navigation.navigate("Home")}
        >
          <LinearGradient
            colors={["#08d4c4", "#01ab9d"]}
            style={styles.gradient_style}
          >
            <Text style={styles.button_text}>Get Started</Text>
            <Entypo name="chevron-right" size={14} color="white" />
          </LinearGradient>
        </TouchableOpacity>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

这是我的 SplashScreen.js

import { StatusBar } from "expo-status-bar";
import React from "react";
import AwesomeAlert from 'react-native-awesome-alerts';
import AlertPro from "react-native-alert-pro";
import { StyleSheet, Text, View, Modal, TouchableOpacity } from "react-native";
import {useSelector,useDispatch} from 'react-redux'

export default function Login_sign_alert({navigation}) {
    const dispatch=useDispatch()
    function reducer_invisible(){
        dispatch({type:"INVISIBLE"})
      }
  return (
    <AwesomeAlert
    show={useSelector(state=>state.visibility)}
    showProgress={false}
    title="Select Profile"
    message="Choose the profile you want to login/register with."
    closeOnTouchOutside={true}
    closeOnHardwareBackPress={true}
    showCancelButton={true}
    showConfirmButton={true}
    cancelText="Service Provider"
    confirmText="Service Receiver"
    confirmButtonColor="#009387"
    cancelButtonColor="#009387"
    onDismiss={()=>{
        reducer_invisible()
    }}
    onCancelPressed={() => {
        navigation.navigate("SignIn")  
 }}
    onConfirmPressed={() => {
alert("receiver")    }}
  />
 
  );
}

这是我的 Login_sign_alert.js

简而言之，我可以从 SplashScreen.js 导航，但不能从 Login_sign_alert 导航。