ZJSDK

开屏广告

开屏广告

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

开屏广告分为原生开屏广告和开屏广告组件两种类型：

  • 原生开屏广告是拉起一个新的AndroidActivity，接入相对简单，效率更高；

  • 原生开屏组件可以集成在当前的页面中，使用更加灵活。

原生开屏广告

调用ZJAndroid.loadSplashAd(posId: string, callback: AdCallback)方法请求原生开屏广告并处理结果。其中请求失败与展示失败事件合并为了展示失败的Event。

AdCallback 事件说明

Event参数说明
ZJEvent.SHOW_ERRORerrCode:number, errMsg:string广告展示失败
errCode:错误码，非错误事件为0
errMsg:错误信息，非错误事件为空字符串
ZJEvent.SHOW/广告展示成功

原生开屏广告示例

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

/**
 * 原生界面加载开屏广告
 */
function loadSplashAd() {
    ZJAndroid.loadSplashAd('Your PosId', (event, errCode, errMsg) => {
        let log = '';
        // 原生界面加载开屏广告时，只会返回这两个事件
        switch (event) {
            case ZJEvent.SHOW_ERROR:
                log = `开屏展示失败 [${errCode}|${errMsg}]`;
                break;
            case ZJEvent.SHOW:
                log = '开屏展示成功';
                break;
            default:
                log = `未知事件：${event}`;
                break;
        }
        console.log(log);
        ToastAndroid.show(log, ToastAndroid.SHORT);
    })
}

开屏广告组件

引入<ZJAndroidSplash posId: string, onAdEvent?: OnAdEvent | undefined/>组件即可请求开屏广告，需要在onAdEvent回调中处理事件并调整state

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/SplashScreen.tsx
import { ZJEvent } from 'rtn-zjandroid/js/ZJAndroid'
import { ZJAndroidSplash } from 'rtn-zjandroid-fabric/js/ZJAndroidSplash'

const [isLoadSplashView, setIsLoadSplashView] = useState(false);

/**
 * 以组件方式加载开屏广告时的广告回调
 * @param event     事件，见 ZJEvent
 * @param errCode   错误码，非错误事件为0
 * @param errMsg    错误信息，非错误事件为空字符串
 */
function onSplashViewEvent(event: ZJEvent, errCode: number, errMsg: string) {
    let log = '';
    switch (event) {
        case ZJEvent.LOAD_ERROR:
            log = `开屏广告加载失败 [${errCode}|${errMsg}]`;
            break;
        case ZJEvent.LOAD:
            log = '开屏广告加载成功';
            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) {
        // 广告流程已结束，重置状态
        setIsLoadSplashView(false)
    }
}

<View style={styles.container}>
    {isLoadSplashView
        ? <ZJAndroidSplash posId='J7844642774' onAdEvent={onSplashViewEvent} style={[styles.bottomView]} />
        : <View style={[styles.bottomView, { backgroundColor: colors.primary }]} />
    }
</View>
目录