（React-Native）FlatList 在滚动 X 次时显示特殊卡片

Question

嘿，我有一个带有卡片项的 FlatList。我想实现这个场景。

场景：

当滚动浏览 Flatlist 中的 5 个项目时，我想显示反馈卡而不是项目卡

如何实施？

Answer 1

您可以尝试以下 - 跟踪 FlatList 的 onScroll 事件，检查您是否为 5 行传递了足够的偏移量，计算目标行位置并在 FlatList 数据中插入反馈卡.

Answer 2

在renderItem方法中，可以访问当前卡的index

我的建议是在每第 5 个项目卡片之后渲染反馈卡片。

粗略的示例如下所示（尚未测试）

const SampleApp = () => {
  const renderItem = ({ item, index }) => {
    return (
      <>
        <ItemCard item={item} />
        {(index > 0 && index % 5 === 0) ? <FeedbackCard /> : null}
      </>
    );
  };

  return <FlatList data={DATA} renderItem={renderItem} />;
};

（React-Native）FlatList 在滚动 X 次时显示特殊卡片

(React-Native) FlatList show special Card when scrolling X amount of times

react-native