RNGoogleMobileAdsBannerView未找到报错求助

问题重现 #

报错信息：

ERROR  Invariant Violation: requireNativeComponent: "RNGoogleMobileAdsBannerView" was not found..

调用栈：

in RNGoogleMobileAdsBannerView (created by BaseAd)
in BaseAd (created by BannerAd)
in BannerAd (created by BannerAd)
in BannerAd (created by HomeMenu)

环境依赖 #

package.json 关键依赖：

"expo": "^48.0.0",
 "expo-build-properties": "~0.5.1",
 "react-native-google-mobile-ads": "^10.0.0",

问题代码 #

BannerAd(props) {
    
    const adUnitID = Platform.select({
      ios: Environment.ADS[Platform.OS].BANNER || TestIds.BANNER,
      android: Environment.ADS[Platform.OS].BANNER || TestIds.BANNER,
    });

    return (
      <BannerAd
        unitId={adUnitID}
        size={BannerAdSize.BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
        onAdFailedToLoad={() => <View></View>}
        {...props}
      />
    );
  }

排查与解决方案 #

1. 修复组件命名冲突与无限递归 #

你的代码存在自定义组件与第三方库组件同名的问题：自定义函数组件命名为BannerAd，同时内部渲染<BannerAd />会触发无限递归，还会覆盖从react-native-google-mobile-ads导入的原生组件，直接导致原生视图找不到。

修改方案：

• 重命名自定义组件避免同名冲突
• 确保正确导入库的BannerAd组件
• 修正onAdFailedToLoad回调（该回调用于错误处理，不能返回JSX）

修改后的代码：

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

const CustomBannerAd = (props) => {
  const adUnitID = Platform.select({
    ios: Environment.ADS[Platform.OS].BANNER || TestIds.BANNER,
    android: Environment.ADS[Platform.OS].BANNER || TestIds.BANNER,
  });

  return (
    <BannerAd
      unitId={adUnitID}
      size={BannerAdSize.BANNER}
      requestOptions={{
        requestNonPersonalizedAdsOnly: true,
      }}
      onAdFailedToLoad={(error) => {
        console.error('Banner ad failed to load:', error);
        // 可添加自定义错误处理逻辑，比如显示占位视图
      }}
      {...props}
    />
  );
};

2. 验证Expo插件配置 #

Expo Managed环境中，react-native-google-mobile-ads需要通过config插件完成原生配置，检查app.json或app.config.js是否添加了插件配置：

{
  "expo": {
    "plugins": [
      [
        "react-native-google-mobile-ads",
        {
          "androidAppId": "你的Android AdMob App ID",
          "iosAppId": "你的iOS AdMob App ID"
        }
      ]
    ]
  }
}

添加配置后执行expo prebuild --clean重新生成原生项目文件，再重启开发服务器。

3. 清理缓存与重新构建 #

• 清理Expo缓存：expo start --clear
• 清理npm/yarn缓存：npm cache clean --force 或 yarn cache clean
• iOS环境额外执行：cd ios && pod deintegrate && pod install

4. 确认版本兼容性 #

检查react-native-google-mobile-ads@10.0.0与Expo 48的兼容性，若仍有问题，可尝试降级到适配Expo 48的版本（比如9.2.1，需参考官方版本适配矩阵）。

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