React Native：如何为FlatList项添加统一自定义包裹组件？

要实现用Card和YGroup包裹所有FlatList列表项且不重复渲染外层组件，你只需要将外层包裹组件移到FlatList外部，而非在renderItem中重复定义。具体做法如下：

代码示例 #

// 移除外层ScrollView，因为FlatList自带滚动能力
<View style={{ paddingTop: 8, paddingHorizontal: 16, paddingBottom: 128 }}>
  <Card elevate size='$2' bordered>
    <YGroup>
      <FlatList
        data={data}
        renderItem={({ item }) => <InterfaceItem {...item} />}
        keyExtractor={(item) => item.index.toString()}
        // 用FlatList的ItemSeparatorComponent替代YGroup的separator
        ItemSeparatorComponent={() => <Separator />}
        // 可选：禁用FlatList自带滚动指示器，保持和原ScrollView一致的视觉效果
        showsVerticalScrollIndicator={false}
      />
    </YGroup>
  </Card>
</View>

核心逻辑说明 #

1. 避免重复渲染：renderItem会为每一条数据执行一次渲染，若在此处包裹Card和YGroup，每个列表项都会生成一套外层组件，导致重复渲染。将它们移到FlatList外层后，只会渲染一次。
2. 替代分隔符：原YGroup的separator属性可以用FlatList的ItemSeparatorComponent替代，实现完全一致的分隔线效果。
3. 滚动逻辑复用：FlatList本身集成了滚动功能，因此可以移除原示例中的外层ScrollView，避免嵌套滚动的潜在问题。

适配注意事项 #

如果YGroup包含特殊的布局样式（如内边距、边框），可以为FlatList添加对应的样式（比如style={{ width: '100%' }}），确保列表项和原ScrollView示例的布局完全对齐。

内容的提问来源于stack exchange，提问作者Kevin C.