TypeError：无法读取未定义的正确“导航”

问题描述

我已经在react native中实现了Stack Navigator，但是显示了错误：“ TypeError：无法读取未定义的正确“导航””。令人惊讶的是，这对一个组件有效，但是当我在另一个组件中使用了相同的代码时，则会显示上述错误。

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,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,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导航。

解决方法

因此，基本上，您想从导航堆栈外部的组件进行导航，而组件的props上没有可用的导航选项。 您可以在Login_sign_alert组件内按照建议的here使用useNavigation挂钩。您需要像这样导入钩子

import { useNavigation } from '@react-navigation/native';

然后在组件内部获取具有导航选项的

const navigation = useNavigation();

替代方法+古怪的方法是https://reactnavigation.org/docs/navigating-without-navigation-prop/，但useNavigation可以解决问题