跳转到内容
Support Center | AppLovin

横幅和 MREC

以下各节将向您介绍如何加载、显示和隐藏横幅或 MREC 广告。

加载横幅或 MREC

下方代码展示了如何使用您的 Ad Unit ID 加载横幅或 MREC 广告，并配置期望的广告位置和 (横幅的) 背景颜色。 MAX 会自动为您调整广告尺寸：

import { BannerAd, AdViewPosition } from 'react-native-applovin-max';


const BANNER_AD_UNIT_ID = Platform.select({
  android: '«android-ad-unit-ID»',
  ios: '«ios-ad-unit-ID»',
});


function initializeBannerAds()
{
  // Banners are automatically sized to 320x50 on phones and 728x90 on tablets
  // You may use the utility method `AppLovinMAX.isTablet()` to help with view sizing adjustments
  BannerAd.createAd(BANNER_AD_UNIT_ID, AdViewPosition.BOTTOM_CENTER);


  // Set background or background color for banners to be fully functional
  // In this case we set it to black - USE HEX STRINGS ONLY
  BannerAd.setBackgroundColor(BANNER_AD_UNIT_ID, '#000000');
}

显示横幅或 MREC

要显示横幅或 MREC，请进行以下调用：

BannerAd.showAd(«ad-unit-ID»);

要隐藏横幅或 MREC，请进行如下调用：

BannerAd.hideAd(«ad-unit-ID»);

原生 UI 组件方法

您可以在 DOM 中以原生 UI 组件的形式直接渲染横幅和 MREC 广告。请参见下方示例：

import { AdView, AdFormat } from 'react-native-applovin-max';


<AdView adUnitId={«ad-unit-ID»}
        adFormat={AdFormat.BANNER}
        style={styles.banner}
        onAdLoaded={(adInfo: AdInfo) => {
          console.log('Banner ad loaded from ' + adInfo.networkName);
        }}
        onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
          console.log('Banner ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
        }}
        onAdClicked={(adInfo: AdInfo) => {
          console.log('Banner ad clicked');
        }}
        onAdExpanded={(adInfo: AdInfo) => {
          console.log('Banner ad expanded')
        }}
        onAdCollapsed={(adInfo: AdInfo) => {
          console.log('Banner ad collapsed')
        }}
        onAdRevenuePaid={(adInfo: AdRevenueInfo) => {
          console.log('Banner ad revenue paid: ' + adInfo.revenue);
        }}/>
⋮
// This example anchors the bottom of the banner to the bottom of the screen
const styles = StyleSheet.create({
  banner: {
    // Set background color for banners to be fully functional
    backgroundColor: '#000000',
    position: 'absolute',
    width: '100%',
    height: 'auto', // Defined by AdView per type of AdView and device
    bottom:  Platform.select({
      ios: 36, // For bottom safe area
      android: 0,
    })
  }
});

广告预加载

从 React Native Plugin 版本 7.0.0 开始，您可以在挂载 AdView 前预加载原生 UI 组件广告。 通过预加载 Ad Unit ID 挂载 AdView 时，系统会使用预加载的原生 UI 组件构架 AdView，方便广告快速展示。

React Native plugin 版本 8.1.0 更新了此预加载功能，支持多个 AdView 实例。 preloadNativeUIComponentAdView() 方法会返回一个 AdViewId，用来在挂载 AdView 时指定预加载的广告。

preloadNativeUIComponentAdView(«ad-unit-ID», AdFormat.BANNER)
  .then((adViewId: AdViewId) => {
    console.log('Started preloading a banner ad for ' + «ad-unit-ID» + ' with AdView ID: ' + adViewId);
  });

您可以在挂载 AdView 时指定 AdViewId：

<AdView
  adUnitId={«ad-unit-ID»}
  adViewId={«ad-view-ID»}
  adFormat={AdFormat.BANNER}
  style={styles.banner}
  onAdLoaded={(adInfo: AdInfo) => {
    console.log('Banner ad ( ' + adInfo.adViewId + ' ) loaded from ' + adInfo.networkName);
  }}
  ⋮
/>

卸载 AdView 时，预加载的原生 UI 组件不会被销毁，而是会被缓存，供下一次挂载时再次使用。 要释放它的资源，请务必在不需要组件时手动将其销毁：

destroyNativeUIComponentAdView(adViewId)
  .then(() => {
    console.log('Destroyed the preloaded banner ad with AdView ID ' + adViewId);
  });

如果在挂载 AdView 时您省略了 AdViewId，组件就会动态加载广告。 在这种情况下，如果您卸载 AdView，它就会被自动销毁，无法再次使用。

请参阅 AppLovin-MAX-React-Native GitHub 项目示例应用，了解完整的运行示例。

自适应横幅

自适应横幅是响应性横幅，其高度取决于设备类型和横幅宽度。 从 plugin 2.3.0 版本起，来自支持自适应横幅的广告平台的横幅均默认为自适应横幅。 如果您想禁用自适应横幅，请按照下方示例设置额外的标记：

BannerAd.setExtraParameter(«ad-unit-ID», "adaptive_banner", "false");

如果需要根据自适应横幅尺寸调整 UI，您可以调取已加载广告的宽度和高度(单位为 dp)。请参考下面的代码片段示例：

BannerAd.addAdLoadedEventListener((adInfo: AdInfo) => {
  const widthDp = adInfo.size.width;
  const heightDp = adInfo.size.height;
});

停止和启动自动刷新

您可以停止广告的自动刷新。 例如，当您隐藏广告或想要手动刷新时，可能会需要这个操作。 请使用以下代码，停止横幅或 MREC 广告自动刷新：

BannerAd.showAd(«ad-unit-ID»);
BannerAd.stopAutoRefresh(«ad-unit-ID»);

使用以下代码为横幅或 MREC 广告启动自动刷新：

BannerAd.startAutoRefresh(«ad-unit-ID»);
© 2025 AppLovin
条款 | 隐私 | EULA | DMCA | Cookie 设置