解决React-Native项目报错【Element type is invalid】_react-native element type is invalid-优快云博客

本文链接：https://blog.youkuaiyun.com/sun_DongLiang/article/details/85320615

本文总结了React Native项目中遇到的“无效的元素类型”错误的两个常见原因及解决方案，包括组件的错误导入导出方式和组件调用区域不当。提供了正确的组件导出与导入示例，以及调整组件调用位置的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
运行项目时出现：无效的元素类型
在网上搜集了几个fix bug的方法，现在总结一下。这也时是当再次遇见相类似的问题时的解决的思路。

可能问题一：组件的导入导出出错

在这之前我并不知道组件类的两种导出方式有什么区别，以至于在一段时间中一直糊里糊涂。现在做一下区分：
1:第一种方式

class PersonalImg extends Component {
  //定义组件
}

export default PersonalImg

在这种方式定义组件并且导出，需要使用export default PersonalImg的方式进行导出。而在使用到这个PersonalImg组件的地方就需要使用import PersonalImg from '../profile/PersonalImg'这种导入方式。
2:第二种方式

export default class PersonalImg extends Component {
  //定义组件
}

直接在定义组件的地方export组件，此时就不需要使用export default PersonalImg这种方式。需要特别注意的是，在使用PersonalImg组件的地方的导入方式：
import { PersonalImg } from '../profile/PersonalImg'
上述两种方式如果搞混了，那么就会出现文章顶部截图中的错误。
参考链接：https://stackoverflow.com/questions/48738761/warning-react-createelement-type-is-invalid-bundle-js

可能问题二：组件调用区域出错

 return (
      <Container>
        <Content>
          <ScrollView>
            {photosContainer}
          </ScrollView>
        </Content>
      </Container>
    )

当调用photosContainer时出现相同的报错信息。此时应该注意，组件的调用区域出错。在查看了React-Native的官方文档之后，发现ScrollView的使用必须要有一个固定的高度，并且他的父元素也要有固定的高度，此时删掉ScrollView标签，项目正常运行起来。

return (
      <Container>
        <Content>
          {photosContainer}
        </Content>
      </Container>
    )

参考链接：https://segmentfault.com/q/1010000011862463

最后的话：
从无从下手到思路清晰，需要经历一个糊涂的阶段。坚持不懈的去思考，去寻找思路，肯定会成功的。耐心，信心，