在@shopify/flash-list中如何强制重渲染React Native Google Mobile Ads Banner组件？

由于Flash List的组件复用机制，挂载后的BannerAd不会自动重新加载广告，以下是几种可行的实现方式：

1. 通过唯一key属性触发组件重新挂载 #

React会根据key值判断是否需要重新渲染组件，当key变化时，旧组件会被卸载，新组件会重新挂载并请求新广告。可以将与广告请求相关的参数（比如关键词数组的哈希值、自增ID）作为key传入：

import React from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function AdmobListAd({ keywordsArr }) {
  // 将关键词数组转为字符串作为唯一key，或者使用自增ID
  const adKey = JSON.stringify(keywordsArr);
  
  return (
    <BannerAd
      key={adKey}
      unitId={adUnitId}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
        keywords: keywordsArr 
      }}
    />
  );
}

export default AdmobListAd;

2. 使用组件实例的reload方法 #

通过useRef获取BannerAd的组件实例，在广告参数变化时主动调用reload()方法触发广告重新加载：

import React, { useRef, useEffect } from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function AdmobListAd({ keywordsArr }) {
  const bannerRef = useRef(null);

  useEffect(() => {
    // 当关键词变化时，调用reload方法
    if (bannerRef.current) {
      bannerRef.current.reload();
    }
  }, [keywordsArr]);

  return (
    <BannerAd
      ref={bannerRef}
      unitId={adUnitId}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
        keywords: keywordsArr 
      }}
    />
  );
}

export default AdmobListAd;

3. 通过状态触发器强制组件重渲染 #

创建一个用于触发重渲染的状态变量，当需要更新广告时，更新该状态以强制组件重新渲染：

import React, { useState, useEffect } from 'react';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const adUnitId = __DEV__ ? TestIds.BANNER : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

function AdmobListAd({ keywordsArr }) {
  const [renderTrigger, setRenderTrigger] = useState(0);

  useEffect(() => {
    // 关键词变化时，更新触发器状态
    setRenderTrigger(prev => prev + 1);
  }, [keywordsArr]);

  return (
    <BannerAd
      unitId={adUnitId}
      size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
        keywords: keywordsArr 
      }}
      // 利用状态变化触发重渲染
      key={renderTrigger}
    />
  );
}

export default AdmobListAd;

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