Google 會運用 AI 技術將內容翻譯成你偏好的語言，但可能會出錯。

顯示原生廣告

原生廣告載入時，應用程式會收到內含廣告素材資源 (例如廣告圖片、文字和影片) 的廣告物件。應用程式負責在原生廣告檢視區塊版面配置中顯示廣告素材資源。為確保原生廣告符合規定，Google Mobile Ads SDK for React Native 提供下列元件：

如要進一步瞭解如何以符合規定的方式顯示原生廣告，請參閱「使用原生進階格式的原生廣告」一文。

本頁說明如何使用 Google Mobile Ads SDK for React Native 顯示原生廣告素材資源、設定媒體內容，以及處理廣告事件。

必要條件

請先完成下列事項，再繼續操作：

定義原生廣告檢視區塊元件

NativeAdView 元件是原生廣告版面配置的頂層容器。這個元件會包裝所有個別素材資源檢視區塊，並將素材資源檢視區塊繫結至載入的 NativeAd 執行個體。

在 NativeAdView 元件中包裝資產會執行下列操作：

廣告顯示在畫面上時，記錄曝光。
使用者輕觸互動式素材資源時，記錄點擊並處理導覽。
顯示及放置 AdChoices 疊加層。

廣告標示和 AdChoices

根據政策規定，所有 Google 原生廣告都必須加上廣告標示和 AdChoices 疊加層。

使用 NativeAdView 包裝版面配置時，Google Mobile Ads SDK for React Native 預設會自動在廣告檢視區塊的右上角顯示 AdChoices 圖示。您不需要新增自訂程式碼或素材資源檢視畫面，圖示就會顯示。

如要自訂圖示的角落位置，請參閱「設定進階原生功能」。

填入並註冊素材資源檢視區塊

如要使用 Google Mobile Ads SDK for React Native 註冊素材資源檢視區塊，請以 NativeAdView.Asset 包裝函式包裝每個素材資源元件，並使用 NativeAdAssetNames 物件指定素材資源類型。每個 NativeAdView.Asset 包裝函式都必須包含單一 React Native 主機元素，例如 Text、Image 或 View，可接受 nativeID 屬性。如要進一步瞭解可用的資產屬性，請參閱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

如果廣告省略選用素材資源，應用程式不得顯示空白的 UI 元素。

顯示媒體內容

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>
  );
}

顯示原生廣告 透過集合功能整理內容 你可以依據偏好儲存及分類內容。