React Native应用iOS端加载Banner广告时弹出黑色视频弹窗

• Android、iPad设备上Banner广告功能运行正常，仅iPhone 6设备可复现异常
• iPhone 6端广告初始加载、显示流程正常，展示数秒后会自动弹出携带系统默认播放器控件的黑色视频弹窗，必须点击弹窗关闭按钮后才能正常操作应用
• 现有Banner广告实现代码：

<Banner
    adSize= {DSWPConfig.adPolicy.adSize.mediumRectangle}
    validAdSizes={[DSWPConfig.adPolicy.adSize.mediumRectangle]}
    adUnitID={item.adUnitId}
    style = {style?.adStyle}
  />

该异常是React Native端AdMob广告SDK在小屏旧iOS设备上的兼容问题：

• 你当前使用的mediumRectangle即300*250规格中矩形广告，在iPhone 6（屏幕宽度375pt，扣除页面边距后实际可用容器宽度往往不足300pt）上渲染时，会因为容器尺寸计算偏差，触发广告内置视频素材的全屏兜底渲染逻辑，错误调用系统原生播放器弹出独立弹窗
• Android端广告SDK渲染逻辑、iPad端大屏足够的渲染空间都不会触发这个兜底逻辑，因此无法复现问题
• 如果项目中react-native-webview版本低于11.0.0，iOS端WebView视口计算偏差会进一步提高该异常的出现概率

按优先级依次操作即可解决：

• 小屏iOS设备广告尺寸降级
  检测到设备为4.7英寸及以下的小屏iOS机型时，不要使用mediumRectangle规格，替换为32050的标准banner或者320100的大banner规格，从根源避免尺寸溢出触发兜底逻辑，参考实现：

  import { Dimensions, Platform } from 'react-native';
  const { width } = Dimensions.get('window');
  // iPhone6屏幕宽度为375pt，匹配小屏设备判定
  const isSmallIOSDevice = Platform.OS === 'ios' && width <= 375;
  const currentAdSize = isSmallIOSDevice 
    ? DSWPConfig.adPolicy.adSize.banner 
    : DSWPConfig.adPolicy.adSize.mediumRectangle;
  
  <Banner
    adSize={currentAdSize}
    validAdSizes={[currentAdSize]}
    adUnitID={item.adUnitId}
    style={style?.adStyle}
  />
  

• 升级相关依赖
  将项目中使用的react-native-google-mobile-ads（旧版为react-native-admob）升级至最新稳定版，同时将react-native-webview升级至11.0.0以上版本，修复iOS端已知的视口计算偏差问题
• 禁用广告视频自动全屏
  若使用的是v6及以上版本的RN AdMob SDK，可给Banner组件添加disableFullScreenVideo={true}属性，从配置层面禁止广告视频触发全屏弹窗
• 固定广告容器尺寸
  给Banner组件的父容器设置和广告规格完全匹配的固定宽高，添加overflow: 'hidden'样式，避免广告SDK渲染时拿到错误的容器尺寸，参考样式：

  const adContainerStyle = {
    width: 300,
    height: 250,
    overflow: 'hidden',
    alignSelf: 'center'
  }
  

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