javascript - 如何在项目之间的 React Flatlist 中呈现 AdMob 横幅？

Question

我有一个 React Native Flatlist，它只在其数据发生变化时重新渲染。

我给它以下数据（作为道具）：

const posts = [
    {
       ...post1Data
    },
    {
       ...post2Data
    },
    {
       ...post3Data
    },
    {
       ...post4Data
    },
    {
       ...post5Data
    },
]

这是我的 FlatList 渲染项：

const renderItem = useCallback(({ item, index }) => {
  const { id, userData, images, dimensions, text } = item;

  return (
    <View
      onLayout={(event) => {
        itemHeights.current[index] = event.nativeEvent.layout.height;
      }}
    >
      <Card
        id={id}
        cached={false}
        userData={userData}
        images={images}
        dimensions={dimensions}
        text={text}
      />
    </View>
  );
}, []);

如何以 5% 的概率在 FlatList 数据之间添加 AdMob 广告，而不会跳过帖子数组中的任何数据？

我试过这个：

const renderItem = useCallback(({ item, index }) => {
  const { id, userData, images, dimensions, text } = item;

  if (Math.random() < 0.05) return <Ad ... />

  return (
    <View
      onLayout={(event) => {
        itemHeights.current[index] = event.nativeEvent.layout.height;
      }}
    >
      <Card
        id={id}
        cached={false}
        userData={userData}
        images={images}
        dimensions={dimensions}
        text={text}
      />
    </View>
  );
}, []);

但这会导致两个问题：

1. 数据中的某些项目被跳过（不返回）
2. 当平面列表重新渲染时（因为它的一些道具发生了变化），广告可能会消失（有 95% 的机会）。

有任何想法吗？我应该像这样在 Card 组件的页脚中随机呈现广告吗？

const Card = memo ((props) => {
    ...
    return (
       <AuthorRow ... />

       <Content ... />

       <SocialRow ... /> {/* Interaction buttons */}

       <AdRow />
    )
}, (prevProps, nextProps) => { ... });



const AdRow = memo(() => {
   return <Ad ... />
}, () => true);

我不太确定这个选项，它有效，但它可能违反 admob 规定（？）（因为我正在调整广告以适应我的卡片组件的布局）

我将不胜感激任何形式的指导/帮助。谢谢你。

标签： javascriptreactjsreact-nativeadmob