原始文本“”必须包含在显式文本组件中

Question

我正在使用react native组件listview来呈现嵌套项，如下所示：

      constructor() {
        super();

        this.renderRow = this.renderRow.bind(this);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
          dataSource: ds.cloneWithRows([
            [
              {'main':'q', 'sub': 'y'}
            ],
            [
              {'main':'x', 'sub': 'f'},
              {'main':'c', 'sub': 'b'}
            ]
          ]),
        };
      }

      renderRow(rowData, section, row) {
        const total = this.state.dataSource.getRowCount();

        let rowView = rowData.map( x => {
          return <View> <Text>{x['main']}</Text> <Text>{x['sub']}</Text> </View>
        })
        return (
          <View>

            {rowView}
          </View>
        );
      }

      render() {
        return (
          <View style={styles.container}>
            <ListView style={styles.listView}
              dataSource={this.state.dataSource}
              renderRow={this.renderRow}
            />
          </View>
        );
      }

但我收到以下错误： 原始文本“”必须包含在显式文本组件中。

我无法跟踪我从哪里收到此错误。

Answer 1

let rowView = rowData.map( x => {
          return <View> <Text>{x['main']}</Text> <Text>{x['sub']}</Text> </View>
        })

删除查看和文字组件之间的空格。使用tab并输入而不是空格字符。

let rowView = rowData.map( x => {
              return <View>
                         <Text>{x['main']}</Text>
                         <Text>{x['sub']}</Text>
                     </View>
            })

Answer 2

为了解决这个问题，我使用了正则表达式搜索＆amp;替换整个文件，并将>(\s)+<Text替换为><Text。

Answer 3

主要是由于<View> <Text>等

之间的空格而出现此问题

解决此问题的技巧可能是执行格式文档（我使用的是VScode（IDE），您可以尝试使用任何具有代码样式功能的IDE）。按样式固定标签之间的空格会自动删除。