React Native FlatList未在文本列表上呈现

u7up0aaq 于 2022-12-24 发布在 React

关注(0)|答案(3)|浏览(133)

react native的新功能。我有一个简单的组件，它接收一个成分列表，并以文本平面列表的形式返回这些项。由于某种原因，我无法获取要呈现的数据。我做错了什么吗？我的成分如下所示：

const ingredients = [chicken, butter, oil]

const DisplayRec = ({ ingredients }) => {
  return (
    <View style={styles.container}>
      <Text>Your Recipes</Text>
      <FlatList
        //keyExtractor={(recName) => recName}
        data={ingredients}
        renderItem={({ recName }) => (
          <Text>{recName}</Text>
          
        )}
      />
    </View>
  );
};

react-native

来源：https://stackoverflow.com/questions/74859056/flatlist-not-rendering-on-list-of-text

3条答案

按热度按时间

33qvvth11#

您使用的方式不正确，请尝试

<FlatList
    //keyExtractor={(recName) => recName}
    data={ingredients}
    renderItem={({item, index}) => (
      <Text>{item}</Text>
      
    )}
  />

另外，请浏览FlatList的文档https://reactnative.dev/docs/flatlist#required-renderitem

赞(0）回复(0）举报 2022-12-24

j2datikz2#

首先，您必须完成React-native的官方文档。flatlist文档
你可以简单地将配料数据传递给flatlist并呈现它的函数
For live editing expo link

const ingredients = [
  {
    id: 'bd7',
    title: 'chicken',
  },
  {
    id: '3ac',
    title: 'butter',
  },
  {
    id: '5869',
    title: 'oil',
  },
];

export default function App() {

const renderItem = ({ item }) => (
   <Text>{item.title}</Text>
  );

  return (
    <View >
       <FlatList
        data={ingredients}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
   
    </View>
  );
}

赞(0）回复(0）举报 2022-12-24

e0bqpujr3#

你需要在呈现项中使用return

<FlatList
            //keyExtractor={(recName) => recName}
            data={ingredients}
            renderItem={({ recName }) => {
            return (
            <Text>{recName}</Text>
              
            )}}
          />

希望它对你有用

赞(0）回复(0）举报 2022-12-24

我来回答

React Native FlatList未在文本列表上呈现

3条答案

相关问题

热门标签

最新问答