跳转到主要内容

​
横幅广告 (320x50)

横幅使用程序化叠加方式，在固定屏幕位置覆盖在应用内容上方。 
import { CloudXBannerAd, CloudXAdPosition } from 'cloudx-react-native';

const AD_UNIT_ID = 'home_banner';

CloudXBannerAd.addAdLoadedEventListener((adInfo) => {
    console.log('横幅已加载，来自', adInfo.networkName);
});
CloudXBannerAd.addAdLoadFailedEventListener((error) => {
    console.log('横幅加载失败:', error.code, error.message);
});
CloudXBannerAd.addAdClickedEventListener((adInfo) => {
    console.log('横幅已点击');
});
CloudXBannerAd.addAdExpandedEventListener((adInfo) => {
    console.log('横幅已展开');
});
CloudXBannerAd.addAdCollapsedEventListener((adInfo) => {
    console.log('横幅已收起');
});
CloudXBannerAd.addAdRevenuePaidListener((adInfo) => {
    console.log('横幅收入:', adInfo.revenue);
});

CloudXBannerAd.createAd(AD_UNIT_ID, CloudXAdPosition.BOTTOM_CENTER);
CloudXBannerAd.showAd(AD_UNIT_ID);

CloudXBannerAd.hideAd(AD_UNIT_ID);
CloudXBannerAd.destroyAd(AD_UNIT_ID);
默认启用自动刷新。如需手动控制： 
CloudXBannerAd.stopAutoRefresh(AD_UNIT_ID);
CloudXBannerAd.startAutoRefresh(AD_UNIT_ID);

​
横幅位置

使用 CloudXAdPosition 放置横幅： TOP_LEFT、TOP_CENTER、TOP_RIGHT、CENTER_LEFT、CENTERED、CENTER_RIGHT、BOTTOM_LEFT、BOTTOM_CENTER、BOTTOM_RIGHT 如需像素级控制，使用偏移量： 
CloudXBannerAd.createAdWithOffsets(AD_UNIT_ID, CloudXAdPosition.TOP_CENTER, 0, 50);
CloudXBannerAd.updatePosition(AD_UNIT_ID, CloudXAdPosition.BOTTOM_CENTER);
CloudXBannerAd.updateOffsets(AD_UNIT_ID, 0, 20);
用于统计的可选 placement 和 custom data： 
CloudXBannerAd.setBackgroundColor(AD_UNIT_ID, '#000000');
CloudXBannerAd.setPlacement(AD_UNIT_ID, 'home_screen');
CloudXBannerAd.setCustomData(AD_UNIT_ID, 'custom_data');

​
MREC 广告 (300x250)

MREC 与横幅工作方式相同，但尺寸为 300x250。使用 CloudXMRECAd 模块： 
import { CloudXMRECAd, CloudXAdPosition } from 'cloudx-react-native';

const AD_UNIT_ID = 'home_mrec';

CloudXMRECAd.addAdLoadedEventListener((adInfo) => {
    console.log('MREC 已加载，来自', adInfo.networkName);
});
CloudXMRECAd.addAdLoadFailedEventListener((error) => {
    console.log('MREC 加载失败:', error.code, error.message);
});
CloudXMRECAd.addAdClickedEventListener((adInfo) => {
    console.log('MREC 已点击');
});
CloudXMRECAd.addAdExpandedEventListener((adInfo) => {
    console.log('MREC 已展开');
});
CloudXMRECAd.addAdCollapsedEventListener((adInfo) => {
    console.log('MREC 已收起');
});
CloudXMRECAd.addAdRevenuePaidListener((adInfo) => {
    console.log('MREC 收入:', adInfo.revenue);
});

CloudXMRECAd.createAd(AD_UNIT_ID, CloudXAdPosition.CENTERED);
CloudXMRECAd.showAd(AD_UNIT_ID);

CloudXMRECAd.destroyAd(AD_UNIT_ID);
CloudXMRECAd 与 CloudXBannerAd 的 API 相同，包括位置、偏移、背景色、placement、custom data、自动刷新控制和事件监听器。

​
React Hook

import { useCloudXBanner, CloudXBannerAd, CloudXAdPosition } from 'cloudx-react-native';

function HomeScreen() {
    const { isLoaded, error } = useCloudXBanner('home_banner');

    useEffect(() => {
        CloudXBannerAd.createAd('home_banner', CloudXAdPosition.BOTTOM_CENTER);
        CloudXBannerAd.showAd('home_banner');
        return () => CloudXBannerAd.destroyAd('home_banner');
    }, []);

    return <Text>{isLoaded ? '横幅展示中' : '加载横幅中...'}</Text>;
}
返回：{ isLoaded, error }