Expo Android App 만들기 - 8 (Admob Button)

2023.06.11 - [IT] - Expo Android App 만들기 - 7 (React Navigation)

Expo Android App 만들기 - 7 (React Navigation)

이제 얼추 앱이 구성되고 있다.
(한번 설치해보고 삭제할 앱 이지만)이 글을 읽어서 훗날 설치를 해보시는 분들이나 우연히 내 앱을 설치 해주시는 분들이
나를 위해 광고를 한번 봐주는(?)ㅋㅋㅋ 그런 버튼을 하나 만들까 한다.

현재 내 앱 상태이다.
여기에 광고 봐주기 버튼을 하나 추가한다.

<Button
    icon={'movie-play'}
    mode={'contained'}
    buttonColor={Theme.colors.error}
    style={{
        marginTop:10
    }}
    onPress={()=>{
    }}
>
    광고 봐주기
</Button>

버튼을 추가 해줬다. (Theme는 개인적으로 import 한 값이다.)

클릭을 했을때 admob이 뜨게 구현해보자.

import {AdEventType, InterstitialAd, TestIds} from "react-native-google-mobile-ads";
import {useEffect, useState} from "react";


const interstitial = InterstitialAd.createForAdRequest(TestIds.INTERSTITIAL, {
    requestNonPersonalizedAdsOnly: true,
    keywords: ['fashion', 'clothing'],
})

const Intro = ({navigator}) => {
    const [loaded, setLoaded] = useState(false);

    useEffect(() => {
        const unsubscribe = interstitial.addAdEventListener(AdEventType.LOADED, () => {
            setLoaded(true);
        });

        // Start loading the interstitial straight away
        interstitial.load();

        // Unsubscribe from events on unmount
        return unsubscribe;
    }, []);

    // No advert ready to show yet
    if (!loaded) {
        return null;
    }
    ...
    
    <Button
        icon={'movie-play'}
        mode={'contained'}
        buttonColor={Theme.colors.error}
        style={{
            marginTop:10
        }}
        onPress={()=>{
            interstitial.show(); //추가
        }}
    >
        광고 봐주기
    </Button>

버튼 클릭시 admob이 열리도록 설정 해준후 안드로이드를 빌드를 한번 해주고
앱을 재실행 후 버튼을 클릭해보면

광고가 뜨는 걸 확인 할 수 있다.
조금이나마 나에게 도움이 될 수 있게 해줄 ㅋㅋㅋ 광고 추가 완료.