React Native 的原生广告服务集成
将原生广告服务集成到 React Native 应用程序中，使用预定义或自定义模板提供可自定义的广告体验。
阅读时间10 分钟最后更新于 3 天前
原生广告服务是一种可以自定义的广告形式，可与 app 中的其他内容混合。这使得广告服务看起来更有机，从而带来更好的用户体验和更高的留存率。
先决条件
确保已将 LevelPlay React 原生插件 8.4.0+ 正确集成到应用程序中。此处概述了集成。
集成 LevelPlay 原生广告服务
有两种方法可以使用 React Native 插件集成 LevelPlay 原生广告服务：
- **原生模板：**插件提供的预定义模板（XML 和 XIB 文件）。
- **自定义模板：**由开发者设计样式的自定义模板。
原生模板
原生模板是实现原生广告逻辑的预定视图图。此设置会在广告加载后处理视图数量，并在广告销毁后清除它们。
有两个模板选项：
- Small：不包含媒体视图的模板。
- 中等：具有媒体视图功能的模板。
虽然样式大致相似，但您也可以根据自己的偏好进行自定义。
要集成原生模板，请按照以下步骤操作：
步骤 1.创建 LevelPlayNativeAd 对象
创建一个 LevelPlayNativeAd 对象，负责将广告加载到 LevelPlayNativeAdView 容器中。此对象将处理广告方法，例如加载、销毁，并将为事件回调定义广告放置/位置和监听器。
import { LevelPlayNativeAd, type LevelPlayNativeAdListener、 type LevelPlayAdInfo、 type LevelPlayAdError、} 来自“Unity LevelPlay-mediation”nativeAd = LevelPlayNativeAd.builder() .withPlacement('YOUR_PLACEMENT') .withListener(listener) .build();
步骤 2.实现监听器
在代码中实现 LevelPlayNativeAdListener。LevelPlay SDK 会触发多个回调来通知您原生广告活动。SDK 将通知监听器以下列出的所有事件：
const 监听器：LevelPlayNativeAdListener = { /** 在点击原生广告后调用。*/ onAdClicked：（nativeAd：LevelPlayNativeAd、adInfo：LevelPlayAdInfo) => {, /** 在录制原生广告展示后调用。*/ onAdImpression：（nativeAd：LevelPlayNativeAd、adInfo：LevelPlayAdInfo) => {, /** 在原生广告尝试加载但失败后调用。*/ onAdLoadFailed：（nativeAd：LevelPlayNativeAd，报错：LevelPlayAdError) => {}， /** 在成功加载原生广告后调用。*/ onAdLoaded：（nativeAd：LevelPlayNativeAd、adInfo：LevelPlayAdInfo) => {,};
步骤 3.创建 LevelPlayNativeAdView
创建一个 LevelPlayNativeAdView 组件来定义将托管加载的原生广告的容器。此对象将通过确定宽度和高度或设置容器的框约束来定义原生广告边界。它还可以处理原生广告元素样式，例如：作品/游戏作品、正文、广告主和行动号召按钮。
注意
对于原生模板，默认类型为 SMALL，可通过在小部件创建时定义模板类型来更改。
<LevelPlayNativeAdView style={{ width：300,// Medium Type 的建议宽度 height：350 // Medium Type 的建议高度 }} nativeAd={nativeAd} templateType={LevelPlayTemplateType.Medium} templateStyle={[[LevelPlayNativeAdTemplateStyle] optional]} /><LevelPlayNativeAdView style={{ width：300,// Small Type 的建议宽度 height：175 // Small Type 的建议高度 }} nativeAd={nativeAd} templateType={LevelPlayTemplateType.Small} templateStyle={[[LevelPlayNativeAdTemplateStyle] optional]} />
步骤 3.加载广告
调用 loadAd 方法加载原生广告。可以在 useEffect 钩子或开发者决定的另一个时间调用它。
nativeAd?.loadAd();
步骤 4.销毁原生广告
要销毁原生广告，请调用以下方法：
nativeAd?.destroyAd();
无法再加载已销毁的原生广告。如果要再次投放广告，必须重新创建广告容器组件。
自定义模板设置
自定义模板允许您设计自己的样式和功能来满足指定的需求。它们可灵活地个性化布局和功能，确保独特的用户体验。
这些模板主要用于需要对广告设计进行更高级别的控制。它可以在 Android 和 iOS 平台上实现，并且需要额外的代码实现。
要创建自定义模板，您需要编写原生代码并开发自己的自定义布局。按照以下步骤进行集成：
步骤 1.创建 NativeAdViewManager
类的 Android 或 iOS 实现，将扩展 LevelPlayNativeAdViewManager 并使用自定布局显示加载的广告。
Android
// Android Implementation导入 Android.widget.按钮导入 Android.widget.ImageViewimport Androidimport com.facebook.react.bridge.ReactApplicationContextimport com.ironsource.mediationsdk.ads.nativead.LevelPlayMediaViewimport com.ironsource.mediationsdk.ads.nativead.LevelPlayNativeAdimport com.ironsource.mediationsdk.ads.nativead.NativeAdLayoutimport com.ironsource.react_native_mediation.Rimport com.ironsource.react_native_mediation.RCTLevelPlayNativeAdViewManagerclass NativeAdViewManagerExample( reactApplicationContext:ReactApplicationContext, layoutId:Int):RCTLevelPlayNativeAdViewManager(reactApplicationContext, layoutId) { 覆盖 fun bindNativeAdToView(nativeAd:LevelPlayNativeAd?、nativeAdLayout：NativeAdLayout) { // Extract views val titleView = nativeAdLayout.findViewById<TextView>(R.id.adTitle) val bodyView = nativeAdLayout.findViewById<TextView>(R.id.adBody) val advertiserView = nativeAdLayout.findViewById<TextView>(R.id.adAdvertiser) val callToActionView = nativeAdLayout.findViewById<Button>(R.id.adCallToAction) val iconView = nativeAdLayout.findViewById<ImageView>(R.id.adAppIcon) val mediaView：LevelPlayMediaView? = nativeAdLayout.findViewById(R.id.adMedia) // Bind native ad to view if (nativeAd != null) { if (nativeAd.title != null) { titleView.text = nativeAd.title nativeAdLayout.setTitleView(titleView) } if (nativeAd.body != null) { bodyView.text = nativeAd.body nativeAdLayout.setBodyView(bodyView) } if (nativeAd.advertiser != null) { advertiserView.text = nativeAd.advertiser nativeAdLayout.setAdvertiserView(advertiserView) } if (nativeAd.callToAction != null) { callToActionView.text = nativeAd.callToAction nativeAdLayout.setCallToActionView(callToActionView) } if (nativeAd.icon != null) { iconView!!.setImageDrawable(nativeAd.icon!!.drawable) nativeAdLayout.setIconView(iconView) } if (mediaView != null) { nativeAdLayout.setMediaView(mediaView) } nativeAdLayout.registerNativeAdViews(nativeAd) } } 覆盖 fun getName()：字符串 { return "ExampleViewType" }}
iOS
// iOS Implementation /// h file#import <Foundation/Foundation.h>#import <LevelPlay/LevelPlay.h>#import "RCTLevelPlayNativeAdViewManager.h"@interface NativeAdViewManagerExample：RCTLevelPlayNativeAdViewManager <RCTLevelPlayNativeAdViewManagerDelegate>@end/// m file#import "NativeAdViewManagerExample.h"@implementation NativeAdViewManagerExampleRCT_EXPORT_MODULE(ExampleViewType) // View type definition-（实例类型）init{ self = [super initWithDelegate:self layoutName:@"MyCustomNativeAdViewTemplate"]; return self;}- (void)bindNativeAdToView:(LevelPlayNativeAd *)nativeAd isNativeAdView:(ISNativeAdView *)isNativeAdView { // Extract views UILabel *titleView = isNativeAdView.adTitleView; UILabel *bodyView = isNativeAdView.adBodyView; UILabel *advertiserView = isNativeAdView.adBodyView; UIButton *callToActionView = isNativeAdView.adCallToActionView; UIImageView *iconView = isNativeAdView.adAppIcon; LevelPlayMediaView *mediaView = isNativeAdView.adMediaView; // Bind native ad to view if (nativeAd != nil) { if (nativeAd.title != nil) { titleView.text = nativeAd.title; [isNativeAdView setAdTitleView:titleView]; } if (nativeAd.body != nil) { bodyView.text = nativeAd.body; [isNativeAdView setAdBodyView:bodyView]; } if (nativeAd.advertiser != nil) { advertiserView.text = nativeAd.advertiser; [isNativeAdView setAdAdvertiserView:advertiserView]; } if (nativeAd.callToAction != nil) { [callToActionView setTitle:nativeAd.callToAction forState:UIControlStateNormal]; [isNativeAdView setAdCallToActionView:callToActionView]; } if (nativeAd.icon != nil) { iconView.image = nativeAd.icon.image; [isNativeAdView setAdAppIcon:iconView]; } if (mediaView != nil) { [isNativeAdView setAdMediaView:mediaView]; } // Register native ad views with the provided native ad [isNativeAdView registerNativeAdViews:nativeAd]; }}@end
自定义视图类型字符串应与 React Native 端的 LevelPlayNativeAdView 组件中指定的 viewType 匹配。
- 对于 Android，应在覆盖的 getName 方法中返回视图类型字符串。应返回覆盖方法 getName 的视图类型字符串。
- 对于 iOS，应在 RCT_EXPORT_module** 中指定视图类型字符串。**
步骤 2.为 Android 注册 NativeAdViewManager
创建扩展 LevelPlayNativeAdViewManager 类的自定义原生广告类，请在 MainApplication 中注册 Android 类。
注意
自定义视图类型字符串必须与 React Native 端的 LevelPlayNativeAdView 组件中设置的 viewType 匹配。对于 iOS，由于模块导出用作注册，因此无需额外设置。
// Android Implementationpackage com.ironsource.reactnativetester导入 Android.app.Applicationimport com.facebook.react.PackageListimport com.facebook.react.ReactApplicationimport com.facebook.react.ReactHostimport com.facebook.react.ReactNativeHostimport com.facebook.react.ReactPackageimport com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.loadimport com.facebook.react.defaults.DefaultReactHost.getDefaultReactHostimport com.facebook.react.defaults.DefaultReactNativeHostimport com.facebook.soloader.SoLoaderimport com.unity3d.reactnative.LevelPlayMediationPackage类 MainApplication：Application(), ReactApplication { 覆盖 val reactNativeHost：ReactNativeHost = 对象：DefaultReactNativeHost(this) { 覆盖 fun getPackages()：List<ReactPackage> = PackageList(this).packages.apply { } // Packages that cannot be autolinked yet can be added manually here, for example: add(CustomPackage()) } 覆盖 fun getJSMainModuleName()：字符串 = "index" 覆盖 fun getUseDeveloperSupport()：Boolean = BuildConfig.DEBUG 覆盖 val isNewArchEnabled：Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED 覆盖 val isHermesEnabled：Boolean = BuildConfig.IS_HERMES_ENABLED } 覆盖 val reactHost：ReactHost get() = getDefaultReactHost(applicationContext, reactNativeHost) 覆盖 fun onCreate() { super.onCreate() SoLoader.init(this, false) if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { // If you opted-in for the New Architecture, we load the native entry point for this app. load() } // Register custom view managers LevelPlayMediationPackage.registerViewManager("ExampleViewType") { reactContext -> NativeAdViewManagerExample(reactContext, R.layout.my_custom_native_ad_view) } }}
- 有关在 Android 上配置 NativeAdView 布局的示例，请参阅 my_custom_native_ad_view_template.xml。
- 有关在 iOS 上配置 NativeAdView 布局的示例，请参阅 GitHub。
步骤 3.创建 LevelPlayNativeAdView
创建一个 LevelPlayNativeAdView 组件来定义将托管加载的原生广告的容器。此对象将通过确定宽度和高度或设置容器的框约束来定义原生广告边界。它还可以处理原生广告元素样式，例如：作品/游戏作品、正文、广告主和行动号召按钮。
注意
创建自定义模板时，请确保 viewType 与原生 Android 或 iOS 部分中指定的唯一视图类型对齐。
<LevelPlayNativeAdView style={{ width：300, // 原生广告容器的建议宽度 height：350，// 建议高度（例如：中等样式布局） }} nativeAd={nativeAd} viewType="ExampleViewType" templateStyle={templateStyle} // optional:LevelPlayNativeAdTemplateStyle />
步骤 4.加载广告
调用 loadAd 方法加载原生广告。可根据 useEffect 或开发者决定的其他时间调用它。
nativeAd?.loadAd();
步骤 5。销毁原生广告
要销毁原生广告，请调用原生广告对象的 destroyAd 方法。
nativeAd?.destroyAd();
无法再加载已销毁的原生广告。如果要再次投放广告，必须重新创建广告容器组件。