React Native中FlatList已用Text渲染字符串仍报错求助

报错信息 #

Render Error: Text strings must be rendered within a component.

问题详情 #

尝试实现FlatList组件，参考React Native官方文档示例编写代码，但无法正常运行。已尝试移除字符串引号、重构数组等方法，问题仍未解决。

相关代码 #

import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const ListeEcoles = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={ ({item}) => <Text>{item.key}</Text> }
      />
    </View>
  )
}

export default ListeEcoles;

解决方案 #

报错根源是JSX解析时，可能将标签间的空格/换行识别为未包裹的纯文本，或renderItem的箭头函数写法存在解析歧义。修改方式如下：

1. 给renderItem的箭头函数返回值添加括号，避免解析歧义
2. 确保标签间无多余空格/换行，防止被识别为未包裹的纯文本
3. 给<Text>应用定义好的styles.item样式（优化样式生效）

修改后的代码：

import React from 'react';
import {FlatList, StyleSheet, Text, View} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 22,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});

const ListeEcoles = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => (
          <Text style={styles.item}>{item.key}</Text>
        )}
      />
    </View>
  );
};

export default ListeEcoles;

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