ZJSDK

Banner与信息流广告

Banner与信息流广告

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

提示

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

引入组件

引入<ZJNativeExpressAd {...props} style={{width: Dimensions.get("window").width, height:140}}/>组件即可请求Banner与信息流广告，需要在onAdEvent回调中处理事件并调整state

组件参数说明

props类型说明
adIdstring广告位ID
widthnumber广告预期的宽度
heightnumber广告预期的高度
adBackgroundColor背景的颜色要设置这个参数，必须用#这样的颜色值去设置

示例代码


// 先声明要使用的对象
const ZJNativeExpressAd = requireNativeComponent<ZJExpressAdProps>('ZJNativeExpressAd');
const ZJNativeToReact = NativeModules.ZJNativeToReactEmiter;
const ZJNativeToReactEmiter = new NativeEventEmitter(ZJNativeToReact);


render() {
    const props = {
        params: {
            adId: "K4000000008",
            width: Dimensions.get("window").width,
            height: 140,
            adBackgroundColor: "#00ffff" // 要设置这个参数，必须用#这样的颜色值去设置
        }
    }
    return (
      <View style={[styles.container]}>
        {/* 此处必须设置style，width和height，否则影响手势 */}
        <ZJNativeExpressAd {...props} style={{width: Dimensions.get("window").width, height:140}}/>
      </View>
    )
  }

// 订阅事件

private subs: EmitterSubscription | null = null;

componentDidMount(): void {
    this.subs = ZJNativeToReactEmiter.addListener(
        "ZJNativeToReact",
        (notify) => {
            console.log('notify================', notify);
            switch (notify.event) {
                case 'nativeExpressAdViewDidLoad':
                    console.log('nativeExpressAdViewDidLoad================');
                    break;
                case 'nativeExpressAdDidLoadFail':

                break;
                case 'nativeExpressAdRenderSuccess':

                break;
                case 'nativeExpressAdRenderFail':

                break;
                case 'nativeExpressAdViewWillShow':

                break;
                case 'nativeExpressAdDidClick':

                break;
                case 'nativeExpressAdDislike':
                    break;
                default:
                    break;
            }
        }
    );
}

componentWillUnmount(): void {
    this.subs?.remove();
}
目录