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

最新推荐文章于 2025-05-20 13:38:14 发布

原创最新推荐文章于 2025-05-20 13:38:14 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#移动端

前端踩坑专栏收录该内容

10 篇文章

订阅专栏

本文详细记录了解决React Native项目中出现的InvariantViolation错误的过程，该错误源于文本字符串未被正确包裹在组件中。通过调整代码并禁用编辑器自动补全分号功能，成功解决了这一问题。

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

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>
    }
  }