如何解决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可以解决问题