示例
初始化 SDK
在项目的 App.tsx
或加载首个广告前需初始化 SDK,具体调用参考代码如下:
typescript
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
部分示例如下:
typescript
RNADManager.init(
codes.appid,
{
isLimitPersonalAds: true,// 是否限制个性化广告
isProgrammaticRecommend: false // 是否开启程序化广告推荐
}
)
开屏(Splash)广告的对接及示例
1. 导入 SplashController
模块
typescript
import { SplashController } from "@zmide/react-native-gromore";
2. 使用 SplashController
对象的 show
方法
TIP
必须为 SplashController
传入相应的 slotId
。
示例:
以
TouchableNativeFeedback
组件为容器,点击触发开屏广告。
typescript
<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
模块
typescript
import {BannerView} from '@zmide/react-native-gromore';
2. 使用 BannerView
组件
TIP
必须设置 banner_code
和 height
,否则组件加载渲染失败。
示例:
typescript
<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
模块
typescript
import { FeedView, type FeedViewProps } from "@zmide/react-native-gromore";
导入
FeedViewProps
类型可用于后续个性化调整FeedView
组件。
2. 根据需求设置 FeedViewProps
(可选)
typescript
// `AutoFeedView` 仅为示例名称,可任意定义
const AutoFeedView = (props: FeedViewProps) => {
...
}
FeedViewProps
具有 ViewProps
全部属性的同时还定义了以下属性:
事件名称 | 描述 | 仅限iOS |
---|---|---|
onAdViewDidLoad | 广告加载完成 | |
onAdViewDidClick | 广告被点击 | |
onAdViewLoadFailWithError | 广告加载、渲染失败 | |
onAdViewDidBecomeVisible | 广告视图展示 | |
onAdViewDislikeWithReason | 用户广告反馈 | |
onAdViewDidRemoved | 广告被移除 | |
onAdViewRenderSuccess | 广告渲染成功,仅模板广告会回调 | |
onAdVideoStateDidChanged | 视频播放状态变更 | ✅ |
onAdVideoDidPlayFinish | 视频播放完成 | ✅ |
3. 使用 FeedView
组件
TIP
必须设置 feed_code
和 height
,否则组件加载渲染失败。
示例(参数功能可参考第二步):
typescript
<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 />
。