Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

展示原生广告

加载原生广告时，您的应用会收到一个包含广告素材资源（例如广告的图片、文字和视频）的广告对象。您的应用负责在原生广告视图布局中展示广告素材资源。为了以合规的方式展示原生广告，Google Mobile Ads SDK for React Native 提供了以下组件：

如需详细了解如何以合规方式展示原生广告，请参阅使用原生高级广告格式的原生广告。

本页介绍了如何使用 Google Mobile Ads SDK for React Native 呈现原生广告素材资源、配置媒体内容以及处理广告事件。

前提条件

在继续操作之前，请确保满足以下条件：

定义原生广告视图组件

NativeAdView 组件是原生广告版式的顶级容器。此组件会封装所有单独的素材资源视图，并将这些素材资源视图绑定到已加载的 NativeAd 实例。

将素材资源封装在 NativeAdView 组件中会执行以下操作：

在广告显示在屏幕上时记录展示次数。
在用户点按互动式素材资源时记录点击并处理导航。
显示并定位“广告选项”叠加层。

广告标示和“广告选项”

广告标示和“广告选项”叠加层是所有 Google 原生广告植入方式的强制性政策要求。

当您将布局封装在 NativeAdView 中时，Google Mobile Ads SDK for React Native 默认会在广告视图的右上角自动呈现“广告选项”图标。您无需添加自定义代码或素材资源视图即可显示该图标。

如需自定义图标的角落位置，请参阅设置原生广告的高级功能。

填充和注册素材资源视图

如需向 Google Mobile Ads SDK for React Native 注册素材资源视图，请使用 NativeAdView.Asset 封装容器封装每个素材资源组件，并使用 NativeAdAssetNames 对象指定素材资源类型。每个 NativeAdView.Asset 封装容器都必须包含一个接受 nativeID 属性的 React Native 宿主元素，例如 Text、Image 或 View。如需详细了解可用的资源属性，请参阅类 NativeAd。

下表列出了可用的资产类型、目标属性以及注册资产视图的示例：

素材资源类型	说明与示例
`ADVERTISER`	目标媒体资源： `NativeAd.advertiser` {/* The advertiser or sponsor name (optional). */} {ad.advertiser && ( <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}> <Text>{ad.advertiser}</Text> </NativeAdView.Asset> )}
`BODY`	目标媒体资源： `NativeAd.body` {/* Detailed description text (optional). */} {ad.body && ( <NativeAdView.Asset type={NativeAdAssetNames.BODY}> <Text>{ad.body}</Text> </NativeAdView.Asset> )}
`CALL_TO_ACTION`	目标媒体资源： `NativeAd.callToAction` {/* Action button text such as "Install" or "Shop Now" (optional). */} {ad.callToAction && ( <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}> <View> <Text>{ad.callToAction}</Text> </View> </NativeAdView.Asset> )}
`HEADLINE`	目标媒体资源： `NativeAd.headline` {/* The main title of the ad (required). */} <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}> <Text>{ad.headline}</Text> </NativeAdView.Asset>
`ICON`	目标媒体资源： `NativeAd.icon` {/* The advertiser logo or app icon (optional). */} {ad.icon && ( <NativeAdView.Asset type={NativeAdAssetNames.ICON}> <Image source={{uri: ad.icon.uri}} /> </NativeAdView.Asset> )}
`PRICE`	目标媒体资源： `NativeAd.price` {/* Price string for products or paid apps (optional). */} {ad.price && ( <NativeAdView.Asset type={NativeAdAssetNames.PRICE}> <Text>{ad.price}</Text> </NativeAdView.Asset> )}
`STAR_RATING`	目标媒体资源： `NativeAd.starRating` {/* App rating score from 0 to 5 (optional). */} {ad.starRating !== undefined && ad.starRating > 0 && ( <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}> <Text>★ {ad.starRating.toFixed(1)}</Text> </NativeAdView.Asset> )}
`STORE`	目标媒体资源： `NativeAd.store` {/* App store source such as "Google Play" or "App Store" (optional). */} {ad.store && ( <NativeAdView.Asset type={NativeAdAssetNames.STORE}> <Text>{ad.store}</Text> </NativeAdView.Asset> )}

始终有条件地呈现以下可选素材资源视图：

ad.icon
ad.body
ad.advertiser
ad.price
ad.store
ad.starRating

当广告省略可选素材资源时，您的应用不得显示空的界面元素。

显示媒体内容

NativeAdMediaView 组件用于呈现广告的视觉素材资源，例如视频和图片。如果广告包含视频内容，媒体视图会缓冲并播放视频。如果广告仅包含图片内容，则媒体视图会改为呈现主图片。

应用媒体大小调整模式

如需控制图片在媒体视图容器中的缩放方式，请在 NativeAdMediaView 组件上应用 resizeMode 属性：

      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

可用的 ResizeMode 值包括：

设置媒体宽高比

如需请求与媒体视图布局的宽高比相匹配的广告素材，请在 NativeAdRequest 实例上指定 aspectRatio 属性。

以下示例请求一个具有横向媒体宽高比的原生广告，在成功时返回加载的广告，在失败时记录出错提示：

export async function loadNativeAdWithAspectRatio(
  adUnitId: string,
): Promise<NativeAd | null> {
  try {
    const ad = await NativeAd.load({
      adUnitId,
      aspectRatio: NativeMediaAspectRatio.LANDSCAPE,
    });
    return ad;
  } catch (error) {
    const loadError = error as LoadAdError;
    console.error('Failed to load native ad:', loadError.message);
    return null;
  }
}

可用的 NativeMediaAspectRatio 值包括：

监听广告事件

如需在发生广告生命周期事件（例如展示或点击）时收到通知，请将事件回调传递给 NativeAdView 组件。如需了解所有可用的回调，请参阅 AdEventCallback。

以下示例将广告事件（例如全屏内容展示或关闭）的事件回调传递给 NativeAdView 组件：

export function NativeAdWithEvents({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView
      ad={ad}
      // Called when the user taps the ad.
      onAdClicked={() => {
        console.log('Native ad was clicked.');
      }}
      // Called when an impression is recorded.
      onAdImpression={() => {
        console.log('Native ad recorded an impression.');
      }}
      // Called when the ad presents full-screen content.
      onAdShowedFullScreenContent={() => {
        console.log('Native ad showed full screen content.');
      }}
      // Called when full-screen content is dismissed.
      onAdDismissedFullScreenContent={() => {
        console.log('Native ad dismissed full screen content.');
      }}
      // Called when the ad is estimated to have earned money.
      onAdPaid={(adValue: AdValue) => {
        console.log(
          `Native ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
        );
      }}
    />
  );
}

查看完整示例

本部分通过一个已完成示例，介绍如何构建可重复使用的原生广告卡片组件。

以下示例定义了 NativeAdCard 组件，该组件会显示广告标示徽章，有条件地呈现和注册各个原生广告素材资源，并使用 NativeAdMediaView 组件呈现媒体内容：

export function NativeAdCard({ad}: {ad: NativeAd}) {
  return (
    <NativeAdView ad={ad}>
      {/* 1. Ad Attribution Badge */}
      <View>
        <Text>Ad</Text>
      </View>

      {/* 2. Header: Icon, Headline, Advertiser, and Star Rating */}
      <View>
        {/* The advertiser logo or app icon (optional). */}
        {ad.icon && (
          <NativeAdView.Asset type={NativeAdAssetNames.ICON}>
            <Image source={{uri: ad.icon.uri}} />
          </NativeAdView.Asset>
        )}

        <View>
          {/* The main title of the ad (required). */}
          <NativeAdView.Asset type={NativeAdAssetNames.HEADLINE}>
            <Text>{ad.headline}</Text>
          </NativeAdView.Asset>

          {/* The advertiser or sponsor name (optional). */}
          {ad.advertiser && (
            <NativeAdView.Asset type={NativeAdAssetNames.ADVERTISER}>
              <Text>{ad.advertiser}</Text>
            </NativeAdView.Asset>
          )}

          {/* App rating score from 0 to 5 (optional). */}
          {ad.starRating !== undefined && ad.starRating > 0 && (
            <NativeAdView.Asset type={NativeAdAssetNames.STAR_RATING}>
              <Text>★ {ad.starRating.toFixed(1)}</Text>
            </NativeAdView.Asset>
          )}
        </View>
      </View>

      {/* 3. Media Content */}
      {/* Video or image media asset (optional). */}
      <NativeAdMediaView resizeMode={ResizeMode.COVER} />

      {/* 4. Body Text */}
      {/* Detailed description text (optional). */}
      {ad.body && (
        <NativeAdView.Asset type={NativeAdAssetNames.BODY}>
          <Text>{ad.body}</Text>
        </NativeAdView.Asset>
      )}

      {/* 5. Footer: Price, Store, and Call To Action */}
      <View>
        {/* Price string for products or paid apps (optional). */}
        {ad.price && (
          <NativeAdView.Asset type={NativeAdAssetNames.PRICE}>
            <Text>{ad.price}</Text>
          </NativeAdView.Asset>
        )}

        {/* App store source such as "Google Play" or "App Store" (optional). */}
        {ad.store && (
          <NativeAdView.Asset type={NativeAdAssetNames.STORE}>
            <Text>{ad.store}</Text>
          </NativeAdView.Asset>
        )}

        {/* Action button text such as "Install" or "Shop Now" (optional). */}
        {ad.callToAction && (
          <NativeAdView.Asset type={NativeAdAssetNames.CALL_TO_ACTION}>
            <View>
              <Text>{ad.callToAction}</Text>
            </View>
          </NativeAdView.Asset>
        )}
      </View>
    </NativeAdView>
  );
}

展示原生广告 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。