解决React-Native项目报错【Element type is invalid】

女爷i 2022-04-10 06:47 243阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
运行项目时出现：无效的元素类型  
在网上搜集了几个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][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][https_segmentfault.com_q_1010000011862463]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220402/7a684de5ed5043d08e260b8a4efdb2d6.png
[https_stackoverflow.com_questions_48738761_warning-react-createelement-type-is-invalid-bundle-js]: https://stackoverflow.com/questions/48738761/warning-react-createelement-type-is-invalid-bundle-js
[https_segmentfault.com_q_1010000011862463]: https://segmentfault.com/q/1010000011862463