公司的 React Native 项目当时为了快速开发,使用的是之前的比较老的 React Native 项目做得架子。没有装 Eslint。稍微不忙的时候,我安装配置了 Eslint,打算新的界面文件使用比较标准的规范编写,陆续把以前写的文件也修改规范。

在格式化规范某个文件的代码的时候,基于 Airbnb 的代码规范做格式化了以后,运行 App 突然出现了问题。问题如下:

ExceptionsManager.js:73 Raw text cannot be used outside of a tag. Not rendering string: ‘ ‘

后来排查了下半个小时才发现,原来一段代码格式化成了这样,注意下面的语句是在一行。

<View key={i} style={styles.textBlockView}> {textArray.filter((ele, j) => Math.floor(j / 5) === i)} </View>)

之前没注意 textArray 是被赋值是 <Text> 标签数组。也就是说,<View> 里包裹 <Text> 标签,前后不能有空格。所以把花括弧前后的空格去掉,或者是另起一行就解决这个问题了。

<View key={i} style={styles.textBlockView}>
  {textArray.filter((ele, j) => Math.floor(j / 5) === i)}
</View>

上面问题的根本原因是:在 React Native 中,必须把文本节点放在 <Text> 组件内。不能直接在<View>下放置一段文本。上面的空格被理解成了空格文本。

// BAD: will raise exception, can't have a text node as child of a <View>
<View>
  Some text
</View>

// GOOD
<View>
  <Text>
    Some text
  </Text>
</View>