公司的 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>