为什么 FlatList 要求我在文本中渲染已经完成的字符串？

Question

我正在尝试显示一个 FlatList。我从文档中获取了示例，但它不起作用。

我有错误：

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

我已经尝试了所有的方法，从字符串中删除引号，创建数组等等。

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;

Answer 1

您提供的代码片段运行正常，没有任何错误。正如您所提到的，文本字符串已使用组件渲染。

但是，如果您没有看到预期的行为，您可以检查以下几点：

1. 依赖项：确保所有必需的依赖项均已安装且最新。

2. 检查导入：确保您已从react-native正确导入组件：

   从“react-native”导入{文本}；