React Native新手遇代码自动添加{" "}及渲染错误求助

问题本质 #

这个错误是React Native的核心规则导致的：所有文本内容（包括空格、换行这类空白字符）必须包裹在<Text>组件内。你看到的{" "}是编辑器格式化工具（比如Prettier）自动将组件间的空白字符转换的结果，这些转换后的空白不在<Text>里，就触发了报错。

具体解决步骤 #

• 清理非法文本节点
  检查你的App.js，找出所有不在<Text>里的文本（包括空格、换行）。比如错误写法：

  <View>
    欢迎
    <Text>React Native</Text>
  </View>
  

  改成正确写法：

  <View>
    <Text>欢迎</Text>
    <Text>React Native</Text>
  </View>
  

  哪怕是组件之间的换行空格，比如<View>里两个组件之间的换行，也会被视为文本节点，必须处理。

• 调整编辑器格式化规则
  如果你用的是Prettier，在项目根目录创建或修改.prettierrc文件，添加配置阻止它自动插入{" "}：

  {
    "htmlWhitespaceSensitivity": "strict",
    "jsxWhitespace": "preserve"
  }
  

  或者直接在编辑器设置里关闭格式化工具对JSX空白的自动转换，确保只有<Text>内部的空白才会被处理。

• 消除组件间隐藏空白
  有时候组件之间的换行、空格肉眼难察觉，比如：

  <View>
    <TouchableOpacity onPress={() => {}}>
      <Text>按钮</Text>
    </TouchableOpacity>
    // 这里的换行空格会被转换成{" "}
    <Text>说明</Text>
  </View>
  

  可以用注释消除空白，或者把组件写在同一行：

  <View>
    <TouchableOpacity onPress={() => {}}>
      <Text>按钮</Text>
    </TouchableOpacity>{/* */}
    <Text>说明</Text>
  </View>
  

• 临时禁用自动格式化
  紧急情况下，先关闭编辑器的「保存时自动格式化」功能，手动删除所有多余的{" "}, 确保所有文本都在<Text>组件内，再重新编译项目。

内容的提问来源于stack exchange，提问作者javatap