集成

本页面将向您介绍如何下载、导入和配置 AppLovin React Native 模块。

info

Note

React Native 模块版本 5 包含重大升级，以支持 Promises 和回调。此升级破坏了向后兼容性。有关变更的摘要，请参阅下文的 React Native v5 迁移指南。

React Native 模块版本 6 包含重大更新，以支持 TypeScript 和模块。自 React Native 版本 0.71 起，TypeScript 成为 React Native 的默认应用程序编程语言。此模块升级破坏了向后兼容性。有关变更的摘要，请参阅下文的 React Native v6 迁移指南。

React Native 模块版本 9 引入了对 React Native 新架构的支持。它保留了现有的 API 和功能。由于新架构中的某些限制，它修改了一些功能。有关这些变更的摘要，请参阅下文的 React Native v9 迁移指南。

下载最新模块

通过运行以下命令，使用 npm 下载 AppLovin MAX React Native 模块：

npm install react-native-applovin-max

要接收版本更新，请订阅 AppLovin MAX React Native 模块 GitHub 仓库。

启用 Ad Review

要启用 MAX Ad Review 服务，请按照以下说明操作：

针对 Android 的说明

在您的 build.gradle 文件末尾添加以下内容：

添加到根级 `build.gradle` 文件

buildscript {
  repositories {
    maven { url 'https://artifacts.applovin.com/android' }
  }
  dependencies {
    classpath "com.applovin.quality:AppLovinQualityServiceGradlePlugin:+"
  }
}

buildscript {
  repositories {
    maven { url = uri("https://artifacts.applovin.com/android") }
  }
  dependencies {
    classpath ("com.applovin.quality:AppLovinQualityServiceGradlePlugin:+")
  }
}

添加到应用级 `build.gradle` 文件

apply plugin: 'applovin-quality-service'
applovin {
  apiKey "«your-ad-review-key»"
}

plugins {
  id("applovin-quality-service")
}
applovin {
  apiKey = "«your-ad-review-key»"
}

您可以在 AppLovin dashboard 的 Account > General > Keys 区域找到您的 Ad Review Key。

针对 iOS 的说明

下载 AppLovinQualityServiceSetup-ios.rb 并将其移动到您的项目文件夹中。打开终端窗口，cd 到您的项目目录，然后运行：

ruby AppLovinQualityServiceSetup-ios.rb

初始化 SDK

将以下代码片段添加到应用的主屏幕中：

import AppLovinMAX, { Configuration } from "react-native-applovin-max";

⋮

AppLovinMAX.initialize("«your-SDK-key»").then((conf: Configuration) => {
  // SDK is initialized, start loading ads
}).catch(error => {
  // Failed to initialize SDK
});

您可以在 AppLovin dashboard 的 Account > General > Keys 区域找到您的 SDK key。

如果 mediation network 缓存了其广告资源，用户将获得更好的体验。因此，请务必在启动时初始化 AppLovin SDK。这可以给 mediation network 留出时间来缓存广告。这对于视频广告尤为重要。

iOS 14 支持

在 iOS 14 中，Apple 引入了全局隐私政策变更。 Apple 要求应用程序遵守这些新政策。如果您未能遵守，可能会损失收入。本节将说明如何遵守这些政策。

SKAdNetwork

使用特定于 network 的标识符更新应用的 Info.plist。请参阅 SKAdNetwork 文档以获取说明。

许可和数据 API

在某些司法管辖区，您必须代表 AppLovin 的变现合作伙伴获得用户的许可。您还必须将许可值传递给 AppLovin。要了解如何操作，请查看 Privacy–consent, age-related flags, and data APIs 文档。

React Native v5 迁移指南

React Native 模块版本 5 包含重大更新，以支持 Promises 和回调。这破坏了向后兼容性。本节将总结这些更新。

原生 UI 组件 (AppLovinMAX.AdView 和 AppLovinMAX.NativeAdView) 可以直接在组件本身中声明回调。

特定于类型的事件监听器将类型作为参数。这些监听器取代了通用的事件监听器。例如，现在使用 AppLovinMAX.addInterstitialLoadedEventListener(listener) 代替 AppLovinMAX.addEventListener(type, listener)。

以前有返回值的 12 个同步方法现在使用 Promises 架构。当您访问 Promise 传递的值时，可以使用 then/catch 或 async/await 进行链式调用。下表显示了更新后的方法。

方法	`resolve` 返回类型	`reject` 返回类型
`AppLovinMAX.getAdaptiveBannerHeightForWidth(width)`	高度 (`float`)	⸺
`AppLovinMAX.hasUserConsent()`	`boolean`	⸺
`AppLovinMAX.initialize(sdkKey)`	Configuration 对象	`error`
`AppLovinMAX.isAppOpenAdReady(adunitId)`	`boolean`	`error`
`AppLovinMAX.isDoNotSell()`	`boolean`	⸺
`AppLovinMAX.isInitialized()`	`boolean`	⸺
`AppLovinMAX.isInterstitialReady(adUnitId)`	`boolean`	`error`
`AppLovinMAX.isMuted()`	`boolean`	⸺
`AppLovinMAX.isRewardedAdReady(adunitId)`	`boolean`	`error`
`AppLovinMAX.isTablet()`	`boolean`	⸺
`AppLovinMAX.showCmpForExistingUser()`	`null`	`error`

您还可以参考演示应用中的此提交，它演示了迁移到使用这些新方法的过程。

React Native v6 迁移指南

React Native 模块版本 6 包含重大更新，以支持 TypeScript 和模块。这破坏了向后兼容性。本节将总结这些更新。

TypeScript

自 React Native 版本 0.71 起，TypeScript 成为 React Native 的默认应用程序编程语言。 React Native 模块版本 6 将代码库迁移到了 TypeScript。

模块

以前的版本导出一个包含 MAX 所有功能的单一模块 AppLovinMAX。版本 6 将这些功能分类到一组模块中。版本 6 的架构类似于版本 5，但更新了函数签名以适应模块的引入。主要的新模块如下：

模块	功能
`AppLovinMAX` (默认)	集成 (初始化和通用功能)
`Privacy`	privacy、terms flow
`AppOpenAd`	应用开屏广告
`BannerAd`	横幅广告
`InterstitialAd`	插屏广告
`MRecAd`	中等矩形 (MREC) 广告
`NativeAdView`	原生广告
`RewardedAd`	激励广告
`AdView`	banners 和 MRECs (UI 组件)

迁移示例

import AppLovinMAX from 'react-native-applovin-max';

AppLovinMAX.addInterstitialLoadedEventListener((adInfo) => {
    const isInterstitialReady = await AppLovinMAX.isInterstitialReady(«ad-unit-ID»);
    if (isInterstitialReady) {
        AppLovinMAX.showInterstitial(«ad-unit-ID»);
    }
});

AppLovinMAX.loadInterstitial(«ad-unit-ID»);

import { InterstitialAd, type AdInfo } from 'react-native-applovin-max';

InterstitialAd.addAdLoadedEventListener((adInfo: AdInfo) => {
    const isInterstitialReady = await InterstitialAd.isAdReady(«ad-unit-ID»);
    if (isInterstitialReady) {
        InterstitialAd.showAd(«ad-unit-ID»);
    }
});

InterstitialAd.loadAd(«ad-unit-ID»);

React Native v9 迁移指南

React Native 模块版本 9 引入了对 React Native 新架构的支持，同时保留了现有的 API 和功能。由于新架构中的某些限制，它修改了一些功能。

主要变更

移除了 AdInfo 中对 waterfall information API 的支持: AdInfo 对象不再支持 waterfall information API。
AdView 和 NativeAdView 中 extraParameters 和 localExtraParameters 的变更: 这些参数现在仅支持字符串和布尔值。如果您之前将这些值设为了 null，现在请将其变为空字符串 ("")。