> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cloudx.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 横幅和 MREC 广告

> 在 React Native 应用中集成 CloudX 横幅和 MREC 广告

## 横幅广告 (320x50)

横幅使用程序化叠加方式，在固定屏幕位置覆盖在应用内容上方。

```typescript theme={null}
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);
```

默认启用自动刷新。如需手动控制：

```typescript theme={null}
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`

如需像素级控制，使用偏移量：

```typescript theme={null}
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：

```typescript theme={null}
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` 模块：

```typescript theme={null}
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

```typescript theme={null}
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 }`