React Native运行报Element type is invalid错误如何解决

报错和export default写法无关，核心原因是React Native内置组件导入路径错误：

• 你代码中Text/Button/View/ScrollView这些RN内置组件，错误地从react包导入，而react包本身不导出任何原生组件，导致这几个组件的值全是undefined，渲染时就会触发「Element type is invalid」的错误。

除此之外代码里还有两个会导致运行异常的小问题：

• addTodo方法内id重复自增：进入方法先执行了一次id++，创建todo对象时又写了id: id++，会导致id跳号，极端情况会出现id重复，影响删除、勾选逻辑的正确性。
• 添加TODO的Button组件属性间漏写空格：onPress={() => this.addTodo()}title="Add TODO"这段里两个属性连写，JSX无法正确识别title属性，会导致按钮属性失效。

1. 修正组件导入路径，把内置组件的导入源改为react-native，替换原导入语句：

import {Text, Button, View, ScrollView} from 'react-native';

2. 修复addTodo方法的重复id自增问题，修改后代码：

addTodo() {
  const text = `TODO Number ${++id}`
  this.setState({
    todos: [
      ...this.state.todos,
      {id: id, text: text, checked: false},
    ], 
  })
}

3. 补全Button组件属性间的空格，修正后代码：

<Button onPress={() => this.addTodo()} title="Add TODO"/>

改完这三处之后代码即可正常运行，Todo的新增、删除、计数逻辑都能正常生效。

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