TypeError: Cannot read proper 'navigate' of undefined
TypeError: Cannot read proper 'navigate' of undefined
我已经在 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 导航。
所以基本上,您想从导航堆栈外部的组件导航,其中导航选项在组件的道具上不可用。
您可以按照建议 here 在 Login_sign_alert 组件中使用 useNavigation 挂钩。你需要像
一样导入钩子
import { useNavigation } from '@react-navigation/native';
然后在组件内部使用
获取导航选项
const navigation = useNavigation();
替代+奇怪的方式是 https://reactnavigation.org/docs/navigating-without-navigation-prop/ 但 useNavigation 会解决问题
我已经在 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 导航。
所以基本上,您想从导航堆栈外部的组件导航,其中导航选项在组件的道具上不可用。 您可以按照建议 here 在 Login_sign_alert 组件中使用 useNavigation 挂钩。你需要像
一样导入钩子import { useNavigation } from '@react-navigation/native';
然后在组件内部使用
获取导航选项const navigation = useNavigation();
替代+奇怪的方式是 https://reactnavigation.org/docs/navigating-without-navigation-prop/ 但 useNavigation 会解决问题