React Native安卓集成react-native-google-mobile-ads遇模块解析错误求助

核心问题分析 #

你遇到的Unable to resolve module ./AdEventType错误，大概率是因为缺失依赖安装步骤、项目类型不兼容、Metro缓存未清理或代码写法错误导致的。以下是针对性的修复步骤：

1. 补全依赖安装步骤 #

你当前的操作跳过了关键的库安装环节，先执行安装命令：

# 使用npm
npm install react-native-google-mobile-ads

# 或使用yarn
yarn add react-native-google-mobile-ads

2. 确认项目类型兼容性 #

npx create-react-native-app默认创建的是Expo Managed项目，而react-native-google-mobile-ads是原生模块，无法直接在Managed项目中使用。你需要二选一：

• 切换到裸React Native项目：执行npx expo prebuild将Managed项目转为Bare Workflow；
• 使用Expo Dev Client：构建自定义开发客户端来支持原生模块。

3. 清理Metro缓存 #

模块解析错误常因缓存残留导致，执行命令重置缓存：

npx react-native start --reset-cache

如果无效，彻底清理依赖后重装：

# Windows系统
rmdir /s node_modules
del package-lock.json
npm install

# macOS/Linux系统
rm -rf node_modules package-lock.json
npm install

4. 修正App.js代码写法 #

你原代码中的<BannerAd />未放在组件的return渲染区域内，不符合React Native语法要求，修正后的完整代码示例：

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

// 初始化广告SDK
mobileAds().initialize().then(() => {
  console.log("AdMob初始化完成");
});

const App = () => {
  return (
    <View style={styles.container}>
      {/* 测试横幅广告 */}
      <BannerAd unitId={TestIds.BANNER} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end', // 横幅广告通常放在底部
    alignItems: 'center',
    paddingBottom: 20,
  },
});

export default App;

5. 安卓端额外配置（裸项目） #

如果是裸React Native项目，需确保安卓配置正确：

• 在android/app/src/main/AndroidManifest.xml中添加AdMob App ID（app.json的配置通常会自动同步，若未生效手动添加）：

  <application>
    <!-- 其他配置 -->
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="ca-app-pub-xxxxxxxx~xxxxxxxx"/>
  </application>
  

• 在android/build.gradle的allprojects/repositories中添加Google Maven仓库：

  allprojects {
    repositories {
      // 其他仓库
      maven { url "https://maven.google.com" }
    }
  }
  

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