React Native集成AdmobBanner时报Element type is invalid错误如何解决

原因说明 #

你报错的核心原因是AdMobBanner等组件早已从Expo核心包中移除，你直接从expo导入自然会拿到undefined，触发组件类型无效的报错。这种导入方式是Expo v38之前的旧用法，后续版本已经将AdMob相关能力剥离为独立的第三方库维护。

具体修复步骤 #

• 第一步：安装对应的AdMob依赖包
  执行安装命令：
  expo install expo-ads-admob
  如果是使用SDK 46及以上版本的Expo项目，可选择适配性更好的react-native-google-mobile-ads库，安装逻辑一致。
• 第二步：修正导入语句
  将原来的导入代码替换为：

import { AdMobBanner, AdMobInterstitial, AdMobRewarded } from 'expo-ads-admob';

• 第三步：补充缺失的基础组件导入
  你的代码中使用了组件但未显式导入，需要在文件头部添加对应导入语句：

import { View, StyleSheet, Alert } from 'react-native';

• 第四步：配置应用级广告参数
  如果是需要打包为原生应用的场景，需要在app.json中补充AdMob应用ID配置：

{
  "expo": {
    "ios": {
      "config": {
        "googleMobileAdsAppId": "你的iOS端AdMob应用ID"
      }
    },
    "android": {
      "config": {
        "googleMobileAdsAppId": "你的Android端AdMob应用ID"
      }
    }
  }
}

完整可运行的横幅广告示例代码 #

import { View, StyleSheet, Alert } from 'react-native';
import { AdMobBanner } from 'expo-ads-admob';

export default function Quest() {
  const handleBannerError = (error) => {
    Alert.alert("广告加载异常", error.message);
  };

  return (
    <View style={styles.container}>
      <AdMobBanner
        style={styles.bottomBanner}
        bannerSize="fullBanner"
        adUnitID="你的广告单元ID"
        testDevices={[AdMobBanner.simulatorId]}
        onAdFailedToLoad={handleBannerError}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  bottomBanner: {
    alignSelf: 'center',
  }
});

注意事项 #

• 测试阶段必须使用官方提供的测试广告ID，不要直接使用正式ID，避免触发AdMob的违规限流机制
• iOS平台需要额外在app.json中添加NSUserTrackingUsageDescription权限说明，否则无法正常获取广告标识加载广告
• 若使用Expo Go预览，部分AdMob功能可能受限制，建议使用自定义开发构建进行功能测试

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