> ## 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.

# App Open 广告

> 在 React Native 应用中集成 CloudX App Open 广告

App Open 广告是在应用启动和回到前台时展示的全屏广告位。

```typescript theme={null}
import { CloudXAppOpenAd } from 'cloudx-react-native';

const AD_UNIT_ID = 'app_open';

CloudXAppOpenAd.addAdLoadedEventListener((adInfo) => {
    console.log('App Open 广告已加载，来自', adInfo.networkName);
});
CloudXAppOpenAd.addAdLoadFailedEventListener((error) => {
    console.log('App Open 广告加载失败:', error.code, error.message);
});
CloudXAppOpenAd.addAdDisplayedEventListener((adInfo) => {
    console.log('App Open 广告已展示');
});
CloudXAppOpenAd.addAdFailedToDisplayEventListener((error) => {
    console.log('App Open 广告展示失败:', error.code, error.message);
});
CloudXAppOpenAd.addAdClickedEventListener((adInfo) => {
    console.log('App Open 广告已点击');
});
CloudXAppOpenAd.addAdHiddenEventListener(() => {
    CloudXAppOpenAd.loadAd(AD_UNIT_ID);
});
CloudXAppOpenAd.addAdRevenuePaidListener((adInfo) => {
    console.log('收入:', adInfo.revenue);
});

CloudXAppOpenAd.loadAd(AD_UNIT_ID);

const isReady = await CloudXAppOpenAd.isAdReady(AD_UNIT_ID);
if (isReady) {
    CloudXAppOpenAd.showAd(AD_UNIT_ID);
    // 或传入可选 placement 和 custom data:
    // CloudXAppOpenAd.showAd(AD_UNIT_ID, 'app_foreground', 'custom_data');
}

CloudXAppOpenAd.destroyAd(AD_UNIT_ID);
```

## React Hook

```typescript theme={null}
import { useCloudXAppOpen } from 'cloudx-react-native';

function AppForegroundGate() {
    const { isLoaded, isLoading, error, load, show, destroy } =
        useCloudXAppOpen('app_open');

    useEffect(() => {
        load();
    }, [load]);

    useEffect(() => {
        if (isLoaded) {
            show('app_foreground');
        }
    }, [isLoaded, show]);

    return null;
}
```

返回：`{ isLoaded, isLoading, error, load, show, destroy }`

* `show()` 接受可选的 `placement` 和 `customData` 参数。
* Hook 在组件卸载时自动销毁广告。