大家晚上好!!
我试图单击“登录或注册按钮”,但收到以下错误:“typeerror:无法读取未定义的属性‘navigate’”
我试图在项目中做一些小的改变,但没有乐趣:(
TypeError: Cannot read property 'navigate' of undefined
onPress
C:/Users/André Vieira/DoneWithit/app/screens/WelcomeScreen.js:21
18 | <View style={styles.buttonsContainer}>
19 | <Button
20 | title="Login"
> 21 | onPress={() => navigation.navigate(routes.LOGIN)}
| ^ 22 | />
23 | <Button
24 | title="Register"
View compiled
这是我的登录屏幕
import React, { useState } from "react";
import { StyleSheet, Image } from "react-native";
import * as Yup from "yup";
import Screen from "../components/Screen";
import {
ErrorMessage,
Form,
FormField,
SubmitButton,
} from "../components/forms";
import authApi from "../api/auth";
import useAuth from "../auth/useAuth";
const validationSchema = Yup.object().shape({
email: Yup.string().required().email().label("Email"),
password: Yup.string().required().min(4).label("Password"),
});
function LoginScreen(props) {
const auth = useAuth();
const [loginFailed, setLoginFailed] = useState(false);
const handleSubmit = async ({ email, password }) => {
const result = await authApi.login(email, password);
if (!result.ok) return setLoginFailed(true);
setLoginFailed(false);
auth.logIn(result.data);
};
return (
<Screen style={styles.container}>
<Image style={styles.logo} source={require("../assets/logo-red.png")} />
<Form
initialValues={{ email: "", password: "" }}
onSubmit={handleSubmit}
validationSchema={validationSchema}
>
<ErrorMessage
error="Invalid email and/or password."
visible={loginFailed}
/>
<FormField
autoCapitalize="none"
autoCorrect={false}
icon="email"
keyboardType="email-address"
name="email"
placeholder="Email"
textContentType="emailAddress"
/>
<FormField
autoCapitalize="none"
autoCorrect={false}
icon="lock"
name="password"
placeholder="Password"
secureTextEntry
textContentType="password"
/>
<SubmitButton title="Login" />
</Form>
</Screen>
);
}
const styles = StyleSheet.create({
container: {
padding: 10,
},
logo: {
width: 80,
height: 80,
alignSelf: "center",
marginTop: 50,
marginBottom: 20,
},
});
export default loginscreen;
也许这很简单,但我想不出来。
有人来帮忙吗?非常感谢。
我的欢迎屏幕
import React from "react";
import { ImageBackground, StyleSheet, View, Image, Text } from "react-native";
import Button from "../components/Button";
import routes from "../navigation/routes";
function WelcomeScreen({ navigation }) {
return (
<ImageBackground
blurRadius={10}
style={styles.background}
source={require("../assets/background.jpg")}
>
<View style={styles.logoContainer}>
<Image style={styles.logo} source={require("../assets/logo-red.png")} />
<Text style={styles.tagline}>Sell What You Don't Need</Text>
</View>
<View style={styles.buttonsContainer}>
<Button
title="Login"
onPress={() => navigation.navigate(routes.LOGIN)}
/>
<Button
title="Register"
color="secondary"
onPress={() => navigation.navigate(routes.REGISTER)}
/>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
background: {
flex: 1,
justifyContent: "flex-end",
alignItems: "center",
},
buttonsContainer: {
padding: 20,
width: "100%",
},
logo: {
width: 100,
height: 100,
},
logoContainer: {
position: "absolute",
top: 70,
alignItems: "center",
},
tagline: {
fontSize: 25,
fontWeight: "600",
paddingVertical: 20,
},
});
export default WelcomeScreen;
从控制台
Uncaught TypeError: Cannot read property 'navigate' of undefined
at onPress (WelcomeScreen.js:21)
at onClick (PressResponder.js:333)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306)
at executeDispatch (react-dom.development.js:389)
at executeDispatchesInOrder (react-dom.development.js:414)
at executeDispatchesAndRelease (react-dom.development.js:3278)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287)
at forEachAccumulated (react-dom.development.js:3259)
at runEventsInBatch (react-dom.development.js:3304)
at runExtractedPluginEventsInBatch (react-dom.development.js:3514)
at handleTopLevel (react-dom.development.js:3558)
at batchedEventUpdates$1 (react-dom.development.js:21871)
at batchedEventUpdates (react-dom.development.js:795)
at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568)
at attemptToDispatchEvent (react-dom.development.js:4267)
at dispatchEvent (react-dom.development.js:4189)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at discreteUpdates$1 (react-dom.development.js:21887)
at discreteUpdates (react-dom.development.js:806)
at dispatchDiscreteEvent (react-dom.development.js:4168)
3条答案
按热度按时间egdjgwm81#
在pernifeous解决方案之后,我开始得到:
我的路线配置:
bkhjykvo2#
welcomescreen似乎不在导航器内,而是作为道具向下传递导航。如果您使用的是react navigation 5.x,则可以使用挂钩:
https://reactnavigation.org/docs/use-navigation/
uplii1fm3#
当-1)您试图达到的值不存在时,js返回undefined。2) 您正在使用的值不存在3)函数没有返回任何内容。4) 当您使用普通代码时,代码中没有任何函数。当一个值不存在时当它实际上不存在或您还没有收到它时,您可以使用它。
在你的情况下-你的
navigation
位于对象(的参数)内welcomeScreen(parameter)
. 你需要达到这个目标object
第一。然后你就可以使用这个函数了navigate
.也可能是因为
routes
没有正确导入。