ZJSDK

视频内容

视频内容

此章节将演示如何请求在React Native环境下请求与展示视频内容

引入组件

引入<ZJContentListPage {...props} style={{width: Dimensions.get("window").width, height: Dimensions.get("window").height - 64,}}/>组件即可请求视频内容页

组件参数说明

param类型说明
posIdstring广告位ID
widthwidth广告的高度
heightheight广告的宽度

示例代码

MyApp/pages/ContentPageAd.tsx
ZJNativeToReactEmiter.addListener(
    "ZJNativeToReact",
    (notify) => {
        console.log('notify================', notify);
        switch (notify.event) {
            case 'videoDidStartPlay':
                
                break;
            case 'videoDidPause':

            break;
            case 'videoDidResume':

            break;
            case 'videoDidEndPlay':

            break;
            case 'videoDidFailedToPlay':

            break;
            case 'contentDidFullDisplay':

            break;
            case 'contentDidEndDisplay':
                break;
            case 'contentDidPause':
                break;
            case 'contentDidResume':
                break;
            default:
                break;
        }
    }
);

// 声明组件
const ZJContentListPage = requireNativeComponent<ZJContentPageAdProps>('ZJContentListPage');
const ZJNativeToReact = NativeModules.ZJNativeToReactEmiter;
const ZJNativeToReactEmiter = new NativeEventEmitter(ZJNativeToReact);

type ZJContentPageAdProps = {
    style?: any;
}

const props = {
    params: {
        adId: "K90010005",
        width: Dimensions.get("window").width,
        height: Dimensions.get("window").height - 64,
    }
}
render() {
    const props = {
        params: {
            adId: "K90010005",
            width: Dimensions.get("window").width,
            height: Dimensions.get("window").height - 64,
        }
    }
    return (
        <View style={[styles.container]}>
            <ZJContentListPage {...props} style={{width: Dimensions.get("window").width,
            height: Dimensions.get("window").height - 64,}}/>
        </View>
    )
  }

// 订阅事件
private subs: EmitterSubscription | null = null;

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

            break;
            case 'videoDidResume':

            break;
            case 'videoDidEndPlay':

            break;
            case 'videoDidFailedToPlay':

            break;
            case 'contentDidFullDisplay':

            break;
            case 'contentDidEndDisplay':
                break;
            case 'contentDidPause':
                break;
            case 'contentDidResume':
                break;
            default:
                break;
        }
    }
);
}

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