使用Firebase广告横幅时遇导入错误：requireNativeComponent未导出

这个错误其实很好理解——requireNativeComponent是React Native专门用来调用iOS/Android原生组件的API，但react-native-web本身并不支持原生组件。而Firebase的AdBanner组件完全依赖原生平台的实现，直接在web环境里引入自然就会触发这个报错。下面给你几个实用的解决思路：

方案1：按平台拆分组件加载 #

利用React Native的Platform模块，只在iOS/Android原生环境下加载AdBanner，web端则用占位组件或者直接不渲染广告：

import { Platform, View, Text } from 'react-native';

// web端默认用占位组件
let AdBannerComponent = () => <View style={{height: 50, backgroundColor: '#eee'}}><Text>Web端广告占位</Text></View>;

if (Platform.OS !== 'web') {
  // 仅在原生平台导入AdBanner
  const { AdBanner } = require('@react-native-firebase/admob');
  AdBannerComponent = AdBanner;
}

// 业务组件中使用
function HomeScreen() {
  return (
    <div>
      {/* 其他页面内容 */}
      <AdBannerComponent
        unitId="your-native-ad-unit-id"
        size="BANNER"
      />
    </div>
  );
}

方案2：web端替换为Firebase Web版广告 #

如果需要在web端也展示广告，就得单独集成Firebase Web版的AdSense广告，和原生端做适配：

1. 先在web项目中引入Firebase Web SDK的广告模块
2. 编写一个跨平台适配的广告组件：

import { Platform } from 'react-native';

export default function AdaptiveAdBanner() {
  if (Platform.OS === 'web') {
    // web端渲染Firebase Web版AdSense广告
    return (
      <div style={{width: '100%', textAlign: 'center'}}>
        <ins className="adsbygoogle"
             style={{display: 'inline-block', width: 320, height: 50}}
             data-ad-client="ca-pub-your-web-client-id"
             data-ad-slot="your-web-ad-slot-id"></ins>
      </div>
    );
  } else {
    // 原生端使用Firebase AdBanner
    const { AdBanner } = require('@react-native-firebase/admob');
    return (
      <AdBanner
        unitId="your-native-ad-unit-id"
        size="BANNER"
      />
    );
  }
}

方案3：排查依赖与打包配置 #

如果是误把原生依赖打包进web代码，还需要做这两步：

• 确认@react-native-firebase/admob的版本和你的React Native版本兼容
• 检查webpack等打包工具的配置，确保它不会把仅支持原生的模块打包进web产物中

小提醒：Firebase原生AdMob和web版AdSense的广告单元ID是完全独立的，要分别在Firebase控制台创建，不能混用哦。

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