First Look

让 CloudX 优先填充广告位，然后回退到您现有的聚合设置

First Look 让 CloudX 优先获得广告位填充机会，同时保留您现有的聚合设置作为回退路径。建议先从一个广告位开始，验证加载和展示行为后，再扩展到更多广告位。

此示例通过 react-native-google-mobile-ads 使用 AdMob 插屏广告作为回退。相同模式也适用于其他回退聚合平台：先加载 CloudX；只有当 CloudX 未加载成功时才加载回退广告；当两个来源都未准备好时，让应用流程继续。

useFirstLookInterstitial.ts

import { useCallback, useEffect, useRef } from 'react';
import { useInterstitialAd } from 'react-native-google-mobile-ads';
import { useCloudXInterstitial } from 'cloudx-react-native';

export function useFirstLookInterstitial(
  cloudXAdUnitId: string,
  adMobAdUnitId: string,
) {
  const {
    error: cloudXError,
    isLoaded: isCloudXLoaded,
    isLoading: isCloudXLoading,
    load: loadCloudX,
    show: showCloudX,
  } = useCloudXInterstitial(cloudXAdUnitId);
  const {
    error: adMobError,
    isClosed: isAdMobClosed,
    isLoaded: isAdMobLoaded,
    load: loadAdMob,
    show: showAdMob,
  } = useInterstitialAd(adMobAdUnitId);
  const adMobLoadRequested = useRef(false);
  const state = useRef({
    isAdMobLoaded,
    isCloudXLoaded,
    isCloudXLoading,
  });

  state.current = {
    isAdMobLoaded,
    isCloudXLoaded,
    isCloudXLoading,
  };

  useEffect(() => {
    if (
      cloudXError &&
      !isAdMobLoaded &&
      !adMobLoadRequested.current
    ) {
      adMobLoadRequested.current = true;
      loadAdMob();
    }
  }, [cloudXError, isAdMobLoaded, loadAdMob]);

  useEffect(() => {
    if (adMobError || isAdMobClosed) {
      adMobLoadRequested.current = false;
    }
  }, [adMobError, isAdMobClosed]);

  const load = useCallback(() => {
    const current = state.current;

    if (
      current.isCloudXLoading ||
      current.isCloudXLoaded ||
      current.isAdMobLoaded ||
      adMobLoadRequested.current
    ) {
      return;
    }

    loadCloudX();
  }, [loadCloudX]);

  const show = useCallback((): boolean => {
    const current = state.current;

    if (current.isCloudXLoaded) {
      showCloudX();
      return true;
    }

    if (current.isAdMobLoaded) {
      showAdMob();
      return true;
    }

    return false;
  }, [showAdMob, showCloudX]);

  return {
    isReady: isCloudXLoaded || isAdMobLoaded,
    load,
    show,
  };
}

当页面准备好预加载广告位时调用 load()。在广告位触发时调用 show()。如果返回 false，表示 CloudX 和回退广告都没有准备好，此时应继续应用流程，不展示广告。

GameScreen.tsx

const firstLookInterstitial = useFirstLookInterstitial(
  CLOUDX_INTERSTITIAL_AD_UNIT_ID,
  ADMOB_INTERSTITIAL_AD_UNIT_ID,
);

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

const continueToNextScreen = () => {
  if (!firstLookInterstitial.show()) {
    navigation.navigate('NextScreen');
  }
};

广告展示、关闭或最终失败后，请在应用准备好下一次广告位机会时再次调用 load()。组件卸载时，两个底层 Hook 都会释放事件订阅；CloudX Hook 还会销毁其插屏广告实例。