前端踩坑(五)--------------------------RN-项目 <Text> component出错问题

5 RN-项目 component出错问题

解决 Invariant Violation Text strings must be rendered within a component出错问题

​ 在做react-native项目时, 碰上了这样的问题,很是不爽, 经过2个多小时的排查, 终于解决了问题,现将经验分享出来,为后来人提供帮助。

首先我们拿到问题搜索相关结果，在rn的github上发现了这样的解释， 意思就是

可能某些地方的 逗号 没有用 text 包裹

https://github.com/facebook/react-native/issues/20543

在我的代码中是这样的， 可以看到在 if语句块下， return 末尾 多了个分号.

也就是没有 ；没有用Text 包裹 ， 造成的原因 是因为编辑器的自动补全分号造成

博主使用的是webStorm 2019.1 ，修改编辑器的设置 ， 默认不补全分号

修改设置的连接在文末会给大家，此处不在赘述

renderRightView() {
  // 判断
  if (this.props.isSwitch) {//true
    return <Switch value={this.state.isOn === true} onValueChange={() => {
      this.setState({
        isOn: !this.state.isOn,
      })
    }} style={{marginRight: 8}}/>;
  } else {
    return <View style={{flexDirection: 'row', alignItems: 'center'}}>
      {this.rightTitle()}
      <Image source={require('./../../image/arrow.png')} style={{width: 22, height: 22, marginRight: 8}}/>;
    </View>
  }
}

删除 renderRightView>return中的分号 , 如下,可见项目正常运行

  // cell右边显示的内容
  renderRightView() {
    // 判断
    if (this.props.isSwitch) {//true
      return <Switch value={this.state.isOn === true} onValueChange={() => {
        this.setState({
          isOn: !this.state.isOn,
        })
      }} style={{marginRight: 8}}/>
    } else {
      return <View style={{flexDirection: 'row', alignItems: 'center'}}>
        {this.rightTitle()}
        <Image source={require('./../../image/arrow.png')} style={{width: 22, height: 22, marginRight: 8}}/>
      </View>
    }
  }

总结

• 在RN 项目中 文字是要被 标签所包裹

• 编辑器默认不全分号,造成问题,要仔细检查代码,细心排错

参考博客

https://blog.csdn.net/zhumengzj/article/details/79640867