react-navigation路由组件报错：必须是React组件问题排查

我一眼就看到你RootStack.js里的导航配置有个明显的语法错误，这就是导致报错的核心原因！

看你这段代码：

const RootStack = createStackNavigator({
  ExampleOne: ExampleOne,
  ExampleTwo, ExampleTwo, // 这里的写法完全错误！
  ExampleThree: ExampleThree,
  ExampleFour: ExampleFour,
  ExampleFive: ExampleFive
});

在createStackNavigator的配置对象里，每个路由都需要遵循路由名称: 对应组件的键值对格式，但你这里的ExampleTwo写成了两个逗号分隔的变量，这会让JavaScript解析这个对象时出现问题——它会把第一个ExampleTwo当作键（隐式转为字符串），第二个ExampleTwo当作一个没有键的属性（这是无效的对象语法，会被忽略或者导致解析错误），最终导致React Navigation无法正确识别你的路由组件，进而抛出"The Component for route 'ExampleOne' must be a React Component"这类误导性的错误提示（其实真正的问题是整个配置对象的结构被破坏了）。

修正后的RootStack.js代码 #

import React from 'react';
import { createStackNavigator } from 'react-navigation';
// Import all MarketsScreen
import { ExampleOne, ExampleTwo, ExampleThree, ExampleFour, ExampleFive } from './Markets';

const RootStack = createStackNavigator({
  ExampleOne: ExampleOne,
  ExampleTwo: ExampleTwo, // 修正为正确的键值对格式
  ExampleThree: ExampleThree,
  ExampleFour: ExampleFour,
  ExampleFive: ExampleFive
});

export default RootStack;

额外检查点（以防还有其他潜在问题） #

• 确认你的ExampleOne到ExampleFive组件确实是有效的React组件：你的组件代码看起来没问题，继承了Component并实现了render方法，而且用native-base的组件也正确导入了，这部分应该没问题。
• 确认react-navigation的版本和你的React/React Native版本兼容：如果你用的是较新的React Native版本，可能需要使用@react-navigation/native而不是旧版的react-navigation（不过你是按照教程操作，应该版本是匹配的）。

修正完那个语法错误后，你的导航应该就能正常工作了！

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