原生广告

借助原生广告，您可以按照应用现有设计制定变现方式。 通过 AppLovin MAX React Native 模块，您可以访问广告的单个素材资源，让广告布局的设计与应用外观保持一致。 SDK 会自动处理图像缓存和指标跟踪，让您将更多时间和精力用于设计广告展示的方式、时机和位置。

该模块仅支持手动集成，您可以手动将原生广告资源加载到自定义视图中。 这种集成方法主要涉及三个步骤：

1. 声明 React Native UI 组件。
2. 刷新原生广告。
3. 销毁原生广告。

要使用手动 API，请在 <UILabel>Create New Ad Unit</UILabel> 屏幕中选择 <UILabel>Manual</UILabel> 模板。

声明 React Native UI 组件

NativeAdView 是保存原生广告组件的容器， 挂载后会自动为您提供的 ad unit ID 加载原生广告。

The plugin provides components that render assets of the native ad. You can style these components as you do with other components in your app. According to AppLovin’s policy, your ad must contain the Privacy Information icon. This icon links to an important privacy notice. You can bind to it by using the OptionsView component.

The following table shows the components that help you render native ad assets:

组件	类型
TitleView	Text
AdvertiserView	Text
BodyView	Text
IconView	Image
MediaView	View
CallToActionView	TouchableOpacity
OptionsView	View
StarRatingView	Number

The following code sample demonstrates a sample native ad that uses all these native ad components. AppLovin does not guarantee a network will return certain assets. For a complete working example, see the example app at the AppLovin-MAX-React-Native GitHub project.

import {
  NativeAdView,
  TitleView,
  AdvertiserView,
  BodyView,
  CallToActionView,
  IconView,
  OptionsView,
  MediaView,
  StarRatingView,
} from 'react-native-applovin-max';

const NativeAd = () => {
  const nativeAdViewRef = useRef();

  // Loads a new native ad
  const onLoadPressed = () => {
    nativeAdViewRef.current?.loadAd();
  };

  // Destroys the current native ad
  const onDestroyPressed = () => {
    nativeAdViewRef.current?.destroyAd();
  }

  return (
    <NativeAdView adUnitId={«ad-unit-ID»}
                  ref={nativeAdViewRef}
                  style={styles.nativead}
                  onAdLoaded={(adInfo: AdInfo) => {
                    console.log('Native ad loaded from ' + adInfo.networkName);
                  }}
                  onAdLoadFailed={(errorInfo: AdLoadFailedInfo) => {
                    console.log('Native ad failed to load with error code ' + errorInfo.code + ' and message: ' + errorInfo.message);
                  }}
                  onAdClicked={(adInfo; AdInfo) => {
                    console.log('Native ad clicked');
                  }}
                  onAdRevenuePaid={(adInfo: AdRevenueInfo) => {
                    console.log('Native ad revenue paid: ' + adInfo.revenue);
                  }}>
       <View style={{flex: 1, flexDirection: 'column'}}>
         <View style={{flexDirection: 'row'}}>
           <IconView style={styles.icon}/>
           <View style={{flexDirection: 'column', flexGrow: 1}}>
             <TitleView style={styles.title}/>
             <AdvertiserView style={styles.advertiser}/>
             <StarRatingView style={styles.starating}/>
           </View>
           <OptionsView style={styles.optionsView}/>
         </View>
         <BodyView style={styles.body}/>
         <MediaView style={styles.mediaView}/>
         <CallToActionView style={styles.callToAction}/>
       </View>
     </NativeAdView>
  );
};

注意

遵循每个广告平台的指导并绑定其所需的广告资源。 否则您的展示可能会无效。

广告重新加载

挂载 NativeAdView 时，AppLovin React Native plugin 会自动加载第一个原生广告。 挂载完毕后，您可以使用它提供的 ref 重新加载下一个广告。

nativeAdViewRef.current?.loadAd();

销毁原生广告

如果您不再使用某个原生广告，就必须清理其资源。 为此请调用 destroyAd() 方法。否则应用的性能就会下降。

nativeAdViewRef.current?.destroyAd();

资源规模

AppLovin recommends that you incorporate as many of the native elements as are appropriate in the context of what the rest of your app looks like. These include the Title and Media View or Icon. If you give the user more information, this helps them decide whether they want to click the ad.

对于 AppLovin Exchange 广告需求，标题、描述和 CTA 所允许的最大字符数如下：

资源	最大字符数
标题	50 个字符
描述	150 个字符。可以在第 149 个字符后添加省略号 (...)作为第 150 个字符。
CTA	15 个字符

对于 SDK 聚合的广告平台，最大字符数由广告平台设置。

如何获取媒体内容长宽比

您可以从 onAdLoaded 回传的参数 adInfo 中调取用于 MediaView 的媒体内容长宽比：

adInfo.nativeAd.mediaContentAspectRatio

星级评分

您可以访问并渲染所推广应用的星级评分。 在可用情况下，该值是 [0.0, 5.0] 范围内的浮点数。

React Native plugin 会自动渲染 StarRatingView 组件中的星级。 如果平台未提供星级评分，那么 React Native plugin 就不会填充星级评级组件。 您需要自行进行对应的布局调整。

您可以从 adInfo.nativeAd.starRating 中调取星级评分，用于当前的广告。