React Native+Formik导航报错：navigation.navigate未定义

错误原因 #

1. 核心问题：你在Formik的render回调函数里尝试解构navigation，但Formik的回调参数中根本不存在navigation这个属性。navigation是React Navigation传递给屏幕组件的props，并非Formik提供的参数。
2. 次要问题：你的App.js组件声明有误，写成了export default function (App)，正确格式应为export default function App()。

修复方法 #

方法一：通过组件Props接收navigation #

修改Login组件，确保它接收React Navigation传递的navigation props，再在Formik内部使用：

// Login.js
export default function Login({ navigation }) { // 从组件props中解构navigation
  return (
    <StyledContainer>
      <InnerContainer>
        <Formik 
          initialValues={{ email: '', password: '' }} 
          onSubmit={(values) => { console.log(values); }}
        >
          {/* 不要从Formik回调里解构navigation */}
          {({ handleChange, handleBlur, handleSubmit, 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>
  );
};

方法二：使用useNavigation钩子（更推荐） #

如果不想通过props传递，可使用React Navigation提供的useNavigation钩子直接获取导航对象：

1. 先在Login.js顶部导入钩子：

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

2. 在组件内部调用钩子并使用：

// Login.js
export default function Login() {
  const navigation = useNavigation(); // 获取navigation对象
  return (
    <StyledContainer>
      <InnerContainer>
        <Formik 
          initialValues={{ email: '', password: '' }} 
          onSubmit={(values) => { console.log(values); }}
        >
          {({ handleChange, handleBlur, handleSubmit, 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>
  );
};

修正App.js的组件声明错误 #

// App.js
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>
  );
}

内容的提问来源于stack exchange，提问作者ash22