ZJSDK

Banner与信息流广告

Banner与信息流广告

此章节将演示如何请求在React Native环境下请求与展示信息流广告

提示

其中Demo工程的测试广告位宽高比动态变化，实际配置的正式广告位宽高比固定

引入组件

引入<ZJAndroidExpress posId: string, isVolumeOn?: boolean, onAdEvent?: OnAdEvent | undefined/>组件即可请求Banner与信息流广告，需要在onAdEvent回调中处理事件并调整state

组件参数说明

param类型说明
posIdstring广告位ID
isVolumeOnboolean是否开启声音，默认true
onAdEventOnAdEvent广告回调

OnAdEvent 事件说明

Event参数说明
ZJEvent.LOAD_ERRORerrCode:number, errMsg:string广告加载失败
errCode:错误码，非错误事件为0
errMsg:错误信息，非错误事件为空字符串
ZJEvent.SHOW_ERRORerrCode:number, errMsg:string广告展示失败
errCode:错误码，非错误事件为0
errMsg:错误信息，非错误事件为空字符串
ZJEvent.LOAD/广告加载成功
ZJEvent.SHOW/广告展示成功
ZJEvent.CLICK/广告点击
ZJEvent.CLOSE/广告关闭

示例代码

MyApp/pages/ExpressScreen.tsx
import ZJAndroid, { ZJEvent } from 'rtn-zjandroid/js/ZJAndroid'
import { ZJAndroidExpress } from 'rtn-zjandroid-fabric/js/ZJAndroidExpress'

// 0->加载中 | 1->加载成功 | 2->加载失败
const [expressAdState, setExpressAdState] = useState(0);

function onExpressViewEvent(event: ZJEvent, errCode: number, errMsg: string) {
    let log = '';
    switch (event) {
        case ZJEvent.LOAD_ERROR:
            log = `信息流广告加载失败 [${errCode}|${errMsg}]`;
            break;
        case ZJEvent.LOAD:
            log = '信息流广告加载成功';
            setExpressAdState(1);
            break;
        case ZJEvent.SHOW_ERROR:
            log = `信息流广告展示失败 [${errCode}|${errMsg}]`;
            break;
        case ZJEvent.SHOW:
            log = '信息流广告展示成功';
            break;
        case ZJEvent.CLICK:
            log = '信息流广告点击';
            break;
        case ZJEvent.CLOSE:
            log = '信息流广告关闭';
            break;
        default:
            log = `未知事件：${event}`;
            break;
    }
    console.log(log);
    ToastAndroid.show(log, ToastAndroid.SHORT);
    if (event == ZJEvent.LOAD_ERROR || event == ZJEvent.SHOW_ERROR || event == ZJEvent.CLOSE) {
        // 广告流程已结束，重置状态
        setExpressAdState(2);
    }
}

// 检查SDK的初始化状态
if (ZJAndroid.isReady()) {
    if (expressAdState == 2) {
        // 加载失败或关闭
        return null;
    } else {
        // 固定宽高比展示容器，在加载成功调整布局
        return <ZJAndroidExpress posId='J1860767573' onAdEvent={onExpressViewEvent} style={{ backgroundColor: '#e0e0e0', paddingStart: 10, paddingEnd: 10, margin: 5, paddingBottom: expressAdState == 0 ? "0%" : "75%" }} />;
    }
} else {
    ToastAndroid.show('SDK尚未初始化完成，请在初始化成功后请求广告', ToastAndroid.SHORT);
    return null;
}
目录