React Native应用运行触发Element type is invalid报错问题

报错本质解析 #

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object 这类报错的核心逻辑是：React渲染层接收到的根组件不是合法可渲染的组件类型。合法的自定义组件仅支持函数、类构造器两种形式，如果传入的是普通对象、undefined、数组这类非组件值，就会触发该错误。提示检查ExpoRootComponent的render方法，是因为Expo内部的根容器组件在渲染时，发现拿到的传入组件值不合法。

你写的代码中存在的具体问题 #

• 最高概率触发报错：匿名默认导出的兼容问题
  你在src/App.js中采用了匿名函数的默认导出写法：export default function() { ... }。在当前版本的Metro打包工具、配合部分旧版Babel转译规则的场景下，匿名导出的函数会被挂载为模块的二级属性，此时index.js里通过默认导入拿到的App变量实际是{ default: 函数组件 }的普通对象，而非函数组件本身，完全匹配报错里“got: object”的触发条件。
  修复方式：给导出的组件加上明确的函数名，同时清除Metro缓存重启服务即可：

  // src/App.js 修改后的导出写法
  export default function App() {
    return (
      <View style={styles.container}>
        <Text>Welcome</Text>
      </View>
    );
  }
  

• 明确的代码错误：样式引用大小写不匹配
  你在组件内给View绑定样式时写的是styles.Container（首字母大写），但在底部的StyleSheet创建逻辑里，实际定义的样式属性是小写开头的container。此时styles.Container的取值为undefined，虽然不会触发元素类型的报错，但会导致所有布局样式完全失效。

• 易踩的框架适配问题：Expo项目的组件注册逻辑不匹配
  你在index.js里直接从react-native引入AppRegistry做组件注册，在新版Expo SDK中，官方的根组件注册逻辑是从expo包引入registerRootComponent方法完成注册。二者底层实现虽然类似，但在部分SDK版本下，自行使用AppRegistry注册的方式会和Expo内部的根容器初始化逻辑产生冲突，导致内部拿到的组件引用变成对象类型，触发ExpoRootComponent的render检查报错。
  修复方式：将index.js的注册逻辑替换为Expo官方推荐写法：

  import { registerRootComponent } from 'expo';
  import App from './src/App';
  registerRootComponent(App);
  

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