React Native点击导航栏链接出现navigation undefined错误求助

刚接触React，正在跟随YouTube教程学习。将导航栏组件导入页面后，点击任意链接会触发Cannot read property 'navigate' of undefined错误。

开发环境 #

• React Native
• Android Studio（搭配模拟器）
• VSCode（开发工具）

相关代码 #

App.js #

import React from 'react';
import { StyleSheet } from 'react-native';

// Menu and Navigation
import { NavigationContainer } from '@react-navigation/native';
import Navigator from './Screens/AppNavigator';

export default function App() {
  return (
       <NavigationContainer>
          <Navigator /> 
       </NavigationContainer>
  );
};

AppNavigator.js #

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen  from './HomeScreen';
import ProfileScreen from './ProfileScreen';

export default function AppNavigator() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator initialRouteName='Home'>
      <Stack.Screen name="Home" component={HomeScreen}  options={{ headerShown: false }} />
      <Stack.Screen name="Profile" component={ProfileScreen} options={{ headerShown: false }} />
    </Stack.Navigator>
  );
};

ProfileScreen.js（已导入导航栏组件） #

import React, { useState } from 'react';
import { View, Text, Image, Button, TextInput } from 'react-native';
import ScreenStyles from './ScreenStyles';
import NavBar from '../components/NavBar/NavBar';

export default function ProfileScreen() {
  return (
    <View style={ScreenStyles.ScreenFramework}>
      <View style={ScreenStyles.ScreenContainer}>
        <View style={{ padding: 30 }}>
          <Text style={ScreenStyles.ScreenTitle}>Your Profile Page</Text>
        </View>
      </View>
      <View style={ScreenStyles.NavBarContainer}>
          <NavBar />
      </View>
    </View>
  );
};

NavBar.js（点击链接触发错误） #

import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import styles from './NavbarStyle';

export default function NavBar({ navigation }) {
  return (
    <View style={styles.NavBarContainer}>
        <View style={styles.ImageContainer}>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}>
          <View style={styles.ImageIcon}>
            <Image
              style={{ width: 40, height: 40 }}
              source={require('./img/home.png')} />
          </View>
        </TouchableOpacity>
        </View>
        <View style={styles.ImageContainer}>
          <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
            <View style={styles.ImageIcon}>
              <Image
                style={{ width: 40, height: 40 }}
                source={require('./img/profile.png')} />
            </View>
          </TouchableOpacity>
        </View>
    </View>
  );
}

解决方案 #

错误核心是NavBar组件没有获取到navigation对象——只有直接作为Stack.Screen挂载的页面（比如ProfileScreen）会自动接收navigation props，它的子组件需要手动传递或通过钩子获取。

方法1：从父组件传递navigation props #

修改ProfileScreen.js，让它接收navigation参数并传递给NavBar：

export default function ProfileScreen({ navigation }) { // 接收navigation
  return (
    <View style={ScreenStyles.ScreenFramework}>
      {/* ...其他代码不变... */}
      <View style={ScreenStyles.NavBarContainer}>
          <NavBar navigation={navigation} /> {/* 传递navigation */}
      </View>
    </View>
  );
};

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

在NavBar.js中直接使用@react-navigation/native提供的useNavigation钩子获取导航对象，无需手动传递：

import React from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import styles from './NavbarStyle';
import { useNavigation } from '@react-navigation/native'; // 导入useNavigation

export default function NavBar() {
  const navigation = useNavigation(); // 获取navigation对象
  return (
    <View style={styles.NavBarContainer}>
        <View style={styles.ImageContainer}>
        <TouchableOpacity onPress={() => navigation.navigate('Home')}>
          <View style={styles.ImageIcon}>
            <Image
              style={{ width: 40, height: 40 }}
              source={require('./img/home.png')} />
          </View>
        </TouchableOpacity>
        </View>
        <View style={styles.ImageContainer}>
          <TouchableOpacity onPress={() => navigation.navigate('Profile')}>
            <View style={styles.ImageIcon}>
              <Image
                style={{ width: 40, height: 40 }}
                source={require('./img/profile.png')} />
            </View>
          </TouchableOpacity>
        </View>
    </View>
  );
}

两种方法都能解决问题，方法2更适合多子组件需要导航的场景，无需层层传递props。

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