react-native-google-mobile-Ads无广告时消除空白区域的实现方法

要实现无广告时完全折叠空白区域，核心是通过广告组件的加载状态回调动态控制其显示或高度，具体方案如下：

• 声明状态变量，用来控制广告组件的显示状态或高度
• 给GAMBannerAd绑定onAdLoaded和onAdFailedToLoad回调，根据广告加载结果更新状态

方案一：直接控制组件显示/隐藏 #

这种方式会在无广告时完全卸载广告组件，彻底避免空白占位：

import React, { useState } from 'react';
import { GAMBannerAd } from 'react-native-google-mobile-ads';

const HeaderAd = ({ headerAdUnit }) => {
  const [isAdLoaded, setIsAdLoaded] = useState(false);

  return (
    <>
      {isAdLoaded && (
        <GAMBannerAd
          unitId={headerAdUnit}
          sizes={['FLUID']}
          onAdLoaded={() => setIsAdLoaded(true)}
          onAdFailedToLoad={() => setIsAdLoaded(false)}
        />
      )}
    </>
  );
};

export default HeaderAd;

方案二：通过样式控制高度 #

如果不想频繁卸载/挂载组件，可以用动态高度实现折叠效果：

import React, { useState } from 'react';
import { GAMBannerAd } from 'react-native-google-mobile-ads';

const HeaderAd = ({ headerAdUnit }) => {
  const [adHeight, setAdHeight] = useState(0);

  return (
    <GAMBannerAd
      unitId={headerAdUnit}
      sizes={['FLUID']}
      onAdLoaded={() => setAdHeight('auto')}
      onAdFailedToLoad={() => setAdHeight(0)}
      style={{ height: adHeight, overflow: 'hidden' }}
    />
  );
};

export default HeaderAd;

两种方案都能解决无广告时的空白问题，可根据项目需求选择使用。

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