React Native登录页跳转报错：undefined is not an object (evaluating 'navigation.navigate')

我已经在应用中嵌入底部导航标签栏，首页位于第一个标签页。希望点击登录页的登录按钮后，跳转到包含首页的主视图（MainContainer），但点击绑定了onPress={goToHome}的登录按钮时出现以下错误：

TypeError: undefined is not an object (evaluating 'navigation.navigate')

登录页代码如下：

import {
  View,
  Text,
  Button,
  TextInput,
  StyleSheet,
  Image,
  TouchableOpacity
} from 'react-native'
import React from 'react'
import { styleProps } from 'react-native-web/dist/cjs/modules/forwardedProps';
import { color } from 'react-native-reanimated';
import MainContainer from '../MainContainer';

export default function LoginScreen({ navigation }) {
  const goToHome = () => {
    navigation.navigate('MainContainer')
  }
  const [text, onChangeText] = React.useState("ExD-");
  const [password, onChangePassword] = React.useState();

  return (
    <View style={styles.container}>
      <Image
        source={require('../../assets/Logo/logo.png')}
        style={{ width: 150, height: 150, paddingTop: 60 }}
      />
      <Text style={styles.loginText}>Login</Text>
      <TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />
      <TextInput
        style={styles.inputPassword}
        onChangeText={onChangePassword}
        value={password}
        secureTextEntry={true}
      />

      <Button title='Login' onPress={goToHome} />

      <View style={styles.forgotPasswordView}>
        <TouchableOpacity underlayColor='#fff'>
          <Text style={styles.forgotPasswordText}>Forgot Password?</Text>
        </TouchableOpacity>
      </View>
    </View >
  )
}

1. 确保LoginScreen处于导航器栈中 #

如果LoginScreen不是通过React Navigation的导航器（如StackNavigator）渲染的，navigation prop不会自动传递。检查导航配置，确保LoginScreen被注册在导航栈内，示例如下：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './screens/LoginScreen';
import MainContainer from './screens/MainContainer';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="MainContainer" component={MainContainer} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

2. 使用useNavigation钩子替代props传递 #

如果因组件层级问题无法获取navigation prop，可使用React Navigation提供的useNavigation钩子修改代码：

import { useNavigation } from '@react-navigation/native'; // 导入钩子

export default function LoginScreen() {
  const navigation = useNavigation(); // 获取navigation对象
  const goToHome = () => {
    navigation.navigate('MainContainer')
  }
  // 其余代码保持不变
}

3. 确认MainContainer的导航注册名称 #

确保要跳转的MainContainer已在导航器中注册，且注册的screen名称与navigation.navigate中传入的字符串完全一致（区分大小写）。

4. 检查组件渲染方式 #

如果LoginScreen是作为普通组件直接渲染（未通过导航器的Screen组件），则无法获取导航上下文。必须通过导航器的路由渲染LoginScreen，才能拿到navigation相关属性。

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