[英]Navigation React Native with Formik - Error: Undefined is not an object (evaluating 'navigation.navigate')
I'm new to React Native and I'm trying to create navigation from the Login page to the Welcome page.我是 React Native 的新手,我正在尝试创建从登录页面到欢迎页面的导航。 I keep getting Error: Undefined is not an object (evaluating 'navigation.navigate').
我不断收到错误消息:未定义不是 object(正在评估“navigation.navigate”)。 Can someone please explain this to me?
有人可以向我解释一下吗? And show me how to fix this?
并告诉我如何解决这个问题?
Here is my App.js:这是我的 App.js:
import React from 'react';
import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native';
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { NavigationContainer } from '@react-navigation/native';
//screens
import Login from './screens/Login';
import Signup from './screens/Signup';
import Welcome from './screens/Welcome';
import EditProfile from './screens/EditProfile';
import BookVaxAppt from './screens/BookVaxAppt';
import UpdateVaxStatus from './screens/UpdateVaxStatus';
const Stack = createNativeStackNavigator();
export default function (App) {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}}>
<Stack.Screen
name="Login"
component={Login}
/>
<Stack.Screen
name="Welcome"
component={Welcome}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
Here is my Login.js:这是我的 Login.js:
<Formik initialValues={{ email: '', password: '' }} onSubmit={(values) => { console.log(values); }}>
{({ handleChange, handleBlur, handleSubmit, navigation, values }) =>
(<StyledFormArea>
<MessageBox>...</MessageBox>
<StyledButton onPress={() => navigation.navigate("Welcome")}>
<ButtonText>Login</ButtonText>
</StyledButton>
<StyledButton google={true} onPress={handleSubmit}>
<Fontisto name="google" color={primary} size={25} />
<ButtonText google={true}>Sign in with Google</ButtonText>
</StyledButton>
<ExtraView>
<ExtraText>Don't have an account? </ExtraText>
<TextLink>
<TextLinkContent>Sign up now</TextLinkContent>
</TextLink>
</ExtraView>
</StyledFormArea>
)}
</Formik>
</InnerContainer>
</StyledContainer>
);
};
How are you importing/using/creating/accessing this navigation
?您如何导入/使用/创建/访问此
navigation
?
In general, there are some ways to navigate between screens (you can read more about them at the official docs ) but I suppose that you are not receiving the navigation
prop at your component that you render your Formik
component.一般来说,有一些方法可以在屏幕之间导航(你可以在官方文档中阅读更多关于它们的信息)但我想你没有在你渲染
Formik
组件的组件上接收到navigation
道具。 Something like this could work:这样的事情可以工作:
const Login = ({ navigation, ...props }) => {
return (
<Formik>
{/* ... */}
<StyledButton onPress={() => navigation.navigate("Welcome")}>
<ButtonText>Login</ButtonText>
</StyledButton>
{/* ... */}
</Formik>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.