react-navigation v2升级v3后createAppContainer报错求助

开发者阿泽

2026-5-13

嘿，我帮你定位到问题的核心啦！你遇到这个报错的主要原因是代码里的变量声明顺序不对，咱们一步步来解决：

问题根源

你现在的代码里，const AppContainer = createAppContainer(AppNavigator);这行写在了AppNavigator定义的前面。因为const声明的变量不存在变量提升，所以当执行这行代码的时候，AppNavigator还没被初始化，处于undefined状态。把一个undefined传给createAppContainer，自然就会抛出找不到router属性的错误了。

修复后的完整代码

只需要把AppContainer的定义移到AppNavigator之后就行，调整后的代码如下：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { createAppContainer, createStackNavigator } from 'react-navigation';

class myScreen extends Component {
  render(){
    return(
      <View>
        <Text>This is my screen</Text>
      </View>
    )
  }
}

// 先定义导航器
const AppNavigator = createStackNavigator(
  { Screen : myScreen },
  { initialRouteName: 'Screen' }
);

// 再基于导航器创建容器
const AppContainer = createAppContainer(AppNavigator);

// 导出容器作为根组件使用
export default AppContainer;

额外需要检查的点

除了变量顺序，还有几个地方可能影响运行：

依赖冲突：你的package.json里同时装了react-native-navigation和react-navigation，这是两个完全独立的导航库，很容易产生冲突。如果你是要升级react-navigation v3，建议卸载react-native-navigation，避免不必要的问题。
缓存问题：如果修复顺序后还是报错，可以试试清理缓存重启项目：
```
npm start -- --reset-cache
```
依赖兼容性：你的react-native版本（0.59.9）和react-navigation v3是兼容的，但要确保react-native-gesture-handler已经正确链接（RN0.59及以上版本自动链接应该已经处理，但可以手动确认一下）。