React Native：FlatList 内容容器的自定义组件

Question

有什么办法可以为FlatList项目添加自定义组件吗？ 我想用等同于此的自定义组件“包装”我的FLatList项目

<ScrollView
    pt={8}
    px={16}
    pb={128}
>
    <Card elevate size='$2' bordered>
        <YGroup separator={<Separator />}>
            {data.map(({value, index}) => {
                <InterfaceItem ... />
            })}
        </YGroup>
    </Card>
</ScrollView>

请注意，这些项目在<Card>和<YGroup>组件内“包装”了如何使用 FlatList 获得相同的结果？

我尝试在renderItem方法中用组件包装项目，但包装器组件也会迭代。

Answer 1

如果我正确理解你的问题，那么如果你不想在迭代中渲染Card和YGroup ，你只需要将FlatList嵌套在你的包装器中。 这看起来像这样：

<Card elevate size="$2" bordered>
  <YGroup separator={<Separator />}>

    <FlatList
      data={data}
      keyExtractor={(item) => `${item.id}`}
      renderItem={({ item }) => {
        return <InterfaceItem ... />;
      }}
    />

  </YGroup>
</Card>;