如何在Expo 50/51版本的React Native项目中集成AdMob并解决失败问题？

我正在使用Expo ^50.0.18版本的React Native项目，package.json配置如下：

{
  "name": "admob",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "^50.0.18",
    "expo-ads-admob": "^13.0.0",
    "expo-dev-client": "~3.3.11",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-google-mobile-ads": "^12.6.0",
    "react-native-web": "~0.19.6",
    "react-dom": "18.2.0",
    "@expo/metro-runtime": "~3.1.3"
  }
}

我尝试集成了以下两个插件但均未成功：

• react-native-google-mobile-ads@12.6.0
• expo-ads-admob@13.0.0

求解决方法以在Expo 50或51版本中正常使用AdMob。

解决方案 #

第一步：清理冲突依赖 #

同时安装expo-ads-admob和react-native-google-mobile-ads会导致功能重叠与依赖冲突，必须二选一：

• 选Expo官方方案，移除社区库：

  npm uninstall react-native-google-mobile-ads
  # 或 yarn remove react-native-google-mobile-ads
  

• 选社区库方案，移除官方库：

  npm uninstall expo-ads-admob
  # 或 yarn remove expo-ads-admob
  

方案一：使用Expo官方expo-ads-admob（适配Expo 50/51） #

1. 确认版本匹配：Expo 50对应expo-ads-admob@13.0.0，Expo 51对应expo-ads-admob@14.0.0，确保版本对应。
2. 配置app.json：在expo字段中添加AdMob插件配置：

   "expo": {
     "plugins": [
       [
         "expo-ads-admob",
         {
           "androidAppId": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX",
           "iosAppId": "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"
         }
       ]
     ]
   }
   

3. 重建开发客户端：因使用expo-dev-client，修改配置后需重新生成客户端：

   expo prebuild --clean
   expo run:android # 或 expo run:ios
   

4. 测试基础广告：用官方测试ID编写测试代码：

   import { BannerAd, BannerAdSize, TestIds } from 'expo-ads-admob';
   
   export default function App() {
     return (
       <BannerAd
         unitId={TestIds.BANNER}
         size={BannerAdSize.BANNER}
         onAdLoaded={() => console.log('Ad loaded')}
         onAdFailedToLoad={(error) => console.error('Ad failed:', error)}
       />
     );
   }
   

方案二：使用社区库react-native-google-mobile-ads（适配Expo 50/51） #

1. 自动配置插件：执行命令完成安装与配置：

   npx react-native-google-mobile-ads setup
   

   该命令会自动在app.json/app.config.js中添加Android、iOS的App ID配置。
2. 重建开发客户端：清理预构建文件并重新生成：

   expo prebuild --clean
   expo run:android # 或 expo run:ios
   

3. 初始化并测试：启动时初始化SDK并添加测试广告：

   import { MobileAds, TestIds, AdUnit } from 'react-native-google-mobile-ads';
   
   MobileAds.initialize();
   
   export default function App() {
     return (
       <AdUnit
         unitId={TestIds.BANNER}
         size="banner"
       />
     );
   }
   

通用排查要点 #

• 确认AdMob账号已完成验证，App ID填写正确（测试阶段可先用官方提供的TestIds）。
• 检查权限：Android默认已包含INTERNET权限，iOS无需额外配置（AdMob默认使用HTTPS）。
• 查看日志：运行项目时查看Metro控制台与设备日志，定位具体错误（如依赖缺失、配置错误等）。

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