React Native 전면 광고 노출하기

전면 광고 노출하기

로컬 환경에서 배너 노출을 확인하고 싶다면, 아래의 TEST_UNIT_ID를 사용해주세요.

자세한 예시는 Github서 확인하실 수 있습니다.

Ad type	Ad unit ID
Interstitial	PUBLIC_TEST_UNIT_ID_INTERSTITIAL

Class

// (선택사항) 이벤트 리스너 선언하기
const listener = {
        onAdReceived: (ad: AdropInterstitialAd) =>
            console.log(`Adrop interstitial Ad load with unitId ${ad.unitId}!`),
        onAdFailedToReceive: (ad: AdropInterstitialAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while load: ${errorCode}`),
        onAdFailedToShowFullScreen: (ad: AdropInterstitialAd, errorCode: string) =>
            console.log(`error in ${ad.unitId} while showing: ${errorCode}`),
        ...
    }
    
const YourComponent: React.FC = () => {
    const [interstitialAd, setInterstitialAd] = useState<AdropInterstitialAd>(null)

    useEffect(() => {
        let adropInterstitialAd = new AdropInterstitialAd('YOUR_UNIT_ID')
        adropInterstitialAd.listener = listener
        adropInterstitialAd.load()
        setInterstitialAd(adropInterstitialAd)
    }, []);

    const show = () => {
        if (interstitialAd?.isLoaded) {
            interstitialAd?.show()
        } else {
            console.log('interstitial ad is loading...')
        }
    }

    return (
        <View>
            <Button title="display ad" onPress={show}/>
        </View>
    )
}

Hook

const YourComponent: React.FC = () => {
    const { load, show, isLoaded, reset } =
        useAdropInterstitialAd('YOUR_UNIT_ID')

    const handleShow = () => {
        if (isLoaded) show()
    }

    return (
        <View>
            <Button title="load ad" onPress={load}/>
            <Button title="display ad" onPress={handleShow}/>
        </View>
    )
}

전면 광고 Destroy

Class

useEffect(() => {
    return () => {
        interstitialAd.destroy()
    }
}, [])

Hook

useEffect(() => {
    return () => {
        reset()
    }
}, [])

적용 확인하기

여기서 광고 유닛이 제대로 적용 되었는지 확인하는 방법을 알아보세요.