示例

初始化 SDK

在项目的 App.tsx 或加载首个广告前需初始化 SDK，具体调用参考代码如下：

import React, { useEffect } from 'react';
import { RNADManager } from '@zmide/react-native-gromore';

export default function App() {
	useEffect(() => {
		// 初始化 react-native-gromore
		RNADManager.init(codes.appid)
			.then((success) => {
			console.log('RNADManager init', success);
			})
			.catch((error) => {
			console.log('RNADManager init failed', error);
			});
	}, []);
	……
}

根据需要可以在初始化 RNADManager 时配置个性化广告和程序化广告推荐，init 部分示例如下：

RNADManager.init(
  codes.appid,
  {
    isLimitPersonalAds: true,// 是否限制个性化广告
    isProgrammaticRecommend: false // 是否开启程序化广告推荐
  }
)

开屏（Splash）广告的对接及示例

1. 导入 SplashController 模块

import { SplashController } from "@zmide/react-native-gromore";

2. 使用 SplashController 对象的 show 方法

TIP

必须为 SplashController 传入相应的 slotId。

示例：

以 TouchableNativeFeedback 组件为容器，点击触发开屏广告。

<TouchableNativeFeedback
  onPress={async () => {
    await SplashController?.show({
      slotId: codes.splash_code,
      onAdLoadSuccess() {
        console.log('Splash onAdLoadSuccess');
      },
      onAdLoadFail(error) {
        console.log('Splash onAdLoadFail', error);
      },
      onAdDidShow() {
        console.log('Splash onAdDidShow');
      },
      onAdViewControllerDidClose() {
        console.log('Splash onAdViewControllerDidClose');
      },
    });
  }}>
  <View>
    <Text>Start Splash</Text>
  </View>
</TouchableNativeFeedback>

SplashController 事件列表如下：

事件名称	描述	仅限iOS
onAdLoadSuccess	广告加载成功
onAdLoadFail	广告加载失败
onAdWillShow	广告即将展示	✅
onAdDidClick	广告被点击
onAdDidShowFailed	广告展示失败	✅
onAdDidClose	广告被关闭
onAdDidShow	广告展示成功
onAdRenderFail	广告渲染失败
onAdRenderSuccess	广告渲染成功
onAdViewControllerDidClose	广告视图控制器关闭	✅
onAdDidCloseOtherController	关闭其他广告控制器	✅
onAdVideoAdDidPlayFinish	视频广告播放完成	✅

横幅（Banner）广告的对接及示例

1. 导入 BannerView 模块

import {BannerView} from '@zmide/react-native-gromore';

2. 使用 BannerView 组件

TIP

必须设置 banner_code 和 height ，否则组件加载渲染失败。

示例：

<BannerView
  slotId={codes.banner_code}
  style={{height: 180}}
  onAdViewDidLoad={() => {
    console.log('BannerView onAdViewDidLoad');
  }}
  onAdViewDidBecomeVisible={() => {
    console.log('BannerView onAdViewDidBecomeVisible');
  }}
  onAdViewLoadFailWithError={({ nativeEven }: any) => {
    console.log('BannerView onAdViewLoadFailWithError', nativeEvent);
  }}
/>

BannerView 事件列表如下：

事件名称	描述
onAdViewDidLoad	广告加载成功
onAdViewDidClick	广告被点击
onAdViewLoadFailWithError	广告加载失败
onAdViewDidBecomeVisible	广告已经展示
onAdViewDislikeWithReason	用户选择不喜欢广告，并提供了不喜欢的理由
onAdViewDidRemoved	广告视图被移除

信息流（Feed）广告的对接及示例

1. 导入 FeedView 模块

import { FeedView, type FeedViewProps } from "@zmide/react-native-gromore";

导入 FeedViewProps 类型可用于后续个性化调整 FeedView 组件。

2. 根据需求设置 FeedViewProps （可选）

// `AutoFeedView` 仅为示例名称，可任意定义
const AutoFeedView = (props: FeedViewProps) => {
  ...
}

FeedViewProps 具有 ViewProps 全部属性的同时还定义了以下属性：

事件名称	描述	仅限iOS
onAdViewDidLoad	广告加载完成
onAdViewDidClick	广告被点击
onAdViewLoadFailWithError	广告加载、渲染失败
onAdViewDidBecomeVisible	广告视图展示
onAdViewDislikeWithReason	用户广告反馈
onAdViewDidRemoved	广告被移除
onAdViewRenderSuccess	广告渲染成功，仅模板广告会回调
onAdVideoStateDidChanged	视频播放状态变更	✅
onAdVideoDidPlayFinish	视频播放完成	✅

3. 使用 FeedView 组件

TIP

必须设置 feed_code 和 height ，否则组件加载渲染失败。

示例（参数功能可参考第二步）：

<FeedView
  slotId={codes.feed_code}
  style={{
    height: 300,
  }}
  onAdViewDidLoad={() => {
    console.log(`FeedView onAdViewDidLoad`);
  }}
  onAdViewRenderSuccess={() => {
    console.log('FeedView onAdViewRenderSuccess');
  }}
  onAdViewLoadFailWithError={({ nativeEvent }: any) => {
    console.log(
      'FeedView onAdViewLoadFailWithError',
      nativeEvent
    );
  }}
/>

若在第二步设置了 AutoFeedView 可将上述 <FeedView /> 组件替换为 <AutoFeedView />。