如何在React Native FlatList中每2个项后插入广告组件？

核心思路是改造数据源，在原文章列表的指定位置插入广告标记项，再通过renderItem区分渲染内容，具体步骤如下：

1. 处理数据源，插入广告标记 #

遍历原文章数据，每2个真实列表项后插入一个带广告标识的对象（注意避免在最后一项后重复插入）：

// 原文章数据
// const DATA = [/* 你的文章数组 */];

// 生成包含广告项的新数据源
const modifiedData = [];
DATA.forEach((item, index) => {
  modifiedData.push(item);
  // 每2个文章项后插入广告，排除最后一项的情况
  if ((index + 1) % 2 === 0 && index !== DATA.length - 1) {
    modifiedData.push({ id: `ad-${index}`, type: 'ad' });
  }
});

2. 改造renderItem，区分渲染内容 #

在渲染函数里判断当前项的类型，若为广告项则渲染广告组件，否则渲染原文章内容：

const renderItem = ({ item }) => {
  // 渲染广告组件（替换为你的Admob广告组件即可）
  if (item.type === 'ad') {
    return (
      <Text style={{ padding: 16, backgroundColor: '#f5f5f5', textAlign: 'center', fontSize: 16 }}>
        Banner Ad Here
      </Text>
    );
  }

  // 原文章项的渲染逻辑，替换成你自己的UI
  return (
    <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#e0e0e0' }}>
      <Text style={{ fontSize: 18, fontWeight: '600', marginBottom: 8 }}>{item.title}</Text>
      <Text style={{ color: '#666' }}>{item.content}</Text>
    </View>
  );
};

3. 更新FlatList组件 #

将FlatList的数据源替换为处理后的modifiedData，keyExtractor保持原逻辑即可（广告项的id已做唯一处理）：

<FlatList
  data={modifiedData}
  renderItem={renderItem}
  keyExtractor={(item) => item.id}
/>

额外说明 #

• 如果你的项目有分页加载逻辑，记得在每次加载新数据后，同样执行上述插入广告项的操作，再合并到现有数据源中。
• 广告项的id用ad-${index}是为了避免和原文章项的id重复，你也可以根据实际情况调整唯一标识规则。

内容的提问来源于stack exchange，提问作者Mishen Thakshana