React Native导航配置遇两类报错：Uncaught error与Invariant Violation求解

错误原因分析 #

你的代码存在两个核心问题：

1. Uncaught error: cannot call a class as function：最后一行export default App()错误地调用了组件类，React需要的是组件本身而非执行后的实例。
2. Invariant Violation: "main" has not been registered：组件导出错误导致AppRegistry无法正确注册应用，同时可能伴随Metro服务器运行目录错误。

具体修复步骤 #

1. 修正组件导出方式 #

将App.js最后一行的：

export default App() 

修改为：

export default App;

createAppContainer返回的是一个React组件类，直接导出这个类即可，不需要调用它。

2. 确保AppRegistry正确注册（可选，针对裸RN项目） #

如果是裸React Native项目（非Expo），可以在App.js末尾添加注册代码，确保应用被正确注册：

import { AppRegistry } from 'react-native';

// 注意：'main'需要和你项目中的注册名称一致，通常在index.js中定义
AppRegistry.registerComponent('main', () => App);

3. 重启Metro开发服务器 #

• 按Ctrl+C停止当前运行的Metro服务器
• 切换到项目根目录，执行命令重启：

npx react-native start

确保服务器在项目根目录启动，避免因路径错误导致模块加载失败。

修复后的完整代码示例 #

import MovieList from './components/list';
import React from 'react';
import Detail from './components/detail';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { AppRegistry } from 'react-native';

const AppNavigator = createStackNavigator({
  MovieList: {screen: MovieList},
  Detail: {screen: Detail},
})

const App = createAppContainer(AppNavigator);

export default App;

// 裸项目需要添加以下注册代码（Expo项目可忽略）
AppRegistry.registerComponent('main', () => App);

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