React Native导航报错：Cannot read property 'navigate' of undefined

问题根源 #

你的App.js组件没有处于NavigationContainer的上下文环境中——虽然你在NavScreenReg.js里配置了导航栈，但如果项目的入口组件仍是默认的App.js，那么App组件就无法获取导航上下文提供的navigation属性，useNavigation钩子也会因找不到导航上下文而报错。

解决方案 #

方案1：修改项目入口为NavScreenReg.js #

根据项目类型调整入口指向：

Expo项目

修改项目根目录的app.json，将main字段指向NavScreenReg.js：

{
  "expo": {
    "main": "./NavScreenReg.js",
    // 其他配置项...
  }
}

或者直接在App.js中导出NavScreenReg：

// App.js
import NavScreenReg from './NavScreenReg';
export default NavScreenReg;

裸React Native项目

修改index.js中的注册组件：

// index.js
import { AppRegistry } from 'react-native';
import NavScreenReg from './NavScreenReg';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => NavScreenReg);

方案2：合并导航逻辑到App.js #

如果不想调整入口，可以直接把导航容器逻辑整合到App.js，避免文件混淆：

// App.js
import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import ArtScreen from './ArtScreen';

const Stack = createNativeStackNavigator();

// 首页组件（原App.js内容）
function HomeScreen({ navigation }) {
  console.log('Navigation prop:', navigation);
  
  return (
    <View style={styles.container}>
      <View style={styles.navBar}>
        <Text style={styles.navItem}>Item1</Text>
        <Text style={styles.navItem}>Item2</Text>
        <Text style={styles.navItem}>Item3</Text>
        <Text style={styles.navItem}>Item4</Text>
      </View>

      <View style={styles.blocksContainer}>
        <View style={styles.row}>
          <View style={styles.block}>
            <Text style={styles.blockText}>Art</Text>
            <Button
              title="Go to Details"
              onPress={() => navigation.navigate('Art')}
            />
          </View>
          <View style={styles.block}>
            <Text style={styles.blockText}>Block2</Text>
          </View>
        </View>
      </View>
      <View style={[styles.block, styles.singleBlock]}>
        <Text style={styles.blockText}>Block3</Text>
      </View>
    </View>
  );
}

// 导出带导航的App组件
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Art" component={ArtScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  navBar: {
    marginTop: 30,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#f8f8f8',
    height: 60,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  navItem: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  blocksContainer: {
    marginTop: 40,
    paddingHorizontal: 20,
  },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  block: {
    flex: 1,
    height: 100,
    backgroundColor: '#f0f0f0',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 5,
    borderRadius: 8,
  },
  singleBlock: {
    alignSelf: 'center',
    width: '95%',
  },
  blockText: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#555',
  },
});

验证修改 #

完成调整后，清除缓存重启项目：

# Expo项目
npx expo start --clear

# 裸RN项目
npx react-native start --reset-cache

此时navigation属性会正常传入组件，按钮点击可正常跳转到ArtScreen。

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