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

解决React-Native项目报错【Element type is invalid】
运行项目时出现:无效的元素类型
在网上搜集了几个fix bug的方法,现在总结一下。这也时是当再次遇见相类似的问题时的解决的思路。

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

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

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

export default PersonalImg

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

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

直接在定义组件的地方export组件,此时就不需要使用export default PersonalImg这种方式。需要特别注意的是,在使用PersonalImg组件的地方的导入方式:
import { PersonalImg } from '../profile/PersonalImg'
上述两种方式如果搞混了,那么就会出现文章顶部截图中的错误。
参考链接:https://*.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

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