import React, { useEffect, useState, useCallback } from 'react';
import {
Button,
View,
Text,
StyleSheet,
Alert,
ActivityIndicator
} from 'react-native';
import { AdropRewardedAd, AdropListener } from 'adrop-ads-react-native';
const RewardedAdScreen = () => {
const [rewardedAd, setRewardedAd] = useState<AdropRewardedAd | null>(null);
const [isLoaded, setIsLoaded] = useState(false);
const [isReady, setIsReady] = useState(false);
const [errorCode, setErrorCode] = useState<string | undefined>();
useEffect(() => {
const unitId = __DEV__ ? 'TEST_UNIT_ID' : 'YOUR_PRODUCTION_UNIT_ID';
// 1. AdropRewardedAd 인스턴스 생성
const ad = new AdropRewardedAd(unitId);
// 2. Listener 설정
const listener: AdropListener = {
onAdReceived: (ad) => {
console.log('광고 수신 완료:', ad.unitId);
setIsLoaded(true);
setErrorCode(undefined);
},
onAdFailedToReceive: (ad, error) => {
console.log('광고 수신 실패:', error);
setIsLoaded(false);
setErrorCode(error);
// 네트워크 에러인 경우 재시도
if (error === 'ERROR_CODE_NETWORK') {
Alert.alert(
'네트워크 오류',
'광고를 불러올 수 없습니다. 3초 후 재시도합니다.',
[{ text: '확인' }]
);
setTimeout(() => {
ad.load();
}, 3000);
}
},
onAdImpression: (ad) => {
console.log('광고 노출됨:', ad.unitId);
},
onAdClicked: (ad) => {
console.log('광고 클릭됨:', ad.unitId);
},
onAdWillPresentFullScreen: (ad) => {
console.log('광고 화면 표시 예정:', ad.unitId);
// 배경 음악 일시정지 등
},
onAdDidPresentFullScreen: (ad) => {
console.log('광고 화면 표시됨:', ad.unitId);
},
onAdWillDismissFullScreen: (ad) => {
console.log('광고 화면 닫기 예정:', ad.unitId);
},
onAdDidDismissFullScreen: (ad) => {
console.log('광고 화면 닫힘:', ad.unitId);
setIsLoaded(false);
// 배경 음악 재개 등
// 다음 광고 미리 로드
ad.load();
},
onAdFailedToShowFullScreen: (ad, error) => {
console.log('광고 표시 실패:', error);
setErrorCode(error);
Alert.alert('오류', '광고를 표시할 수 없습니다. 나중에 다시 시도해주세요.');
},
onAdEarnRewardHandler: (ad, type, amount) => {
console.log(`보상 획득 - 타입: ${type}, 수량: ${amount}`);
grantReward(type, amount);
},
};
ad.listener = listener;
setRewardedAd(ad);
setIsReady(true);
// 3. 광고 로드
ad.load();
// 컴포넌트 언마운트 시 정리
return () => {
ad.destroy();
};
}, []);
const handleShowAd = useCallback(() => {
if (rewardedAd && isLoaded) {
rewardedAd.show();
} else {
Alert.alert('알림', '광고가 아직 로드되지 않았습니다.');
}
}, [rewardedAd, isLoaded]);
const grantReward = (type: number, amount: number) => {
// 사용자에게 보상 지급
Alert.alert(
'보상 획득!',
`타입: ${type}, 수량: ${amount}`,
[{ text: '확인' }]
);
// 실제 보상 지급 로직 구현
// 예: 게임 재화 추가, 생명 회복 등
};
return (
<View style={styles.container}>
<Text style={styles.title}>리워드 광고</Text>
{!isReady && (
<View style={styles.loadingContainer}>
<ActivityIndicator size="large" color="#0000ff" />
<Text style={styles.loadingText}>광고 초기화 중...</Text>
</View>
)}
<View style={styles.buttonContainer}>
<Button
title="광고 로드"
onPress={() => rewardedAd?.load()}
disabled={!isReady}
/>
</View>
<View style={styles.buttonContainer}>
<Button
title={isLoaded ? "동영상 보고 생명 받기" : "광고 로딩중..."}
onPress={handleShowAd}
disabled={!isLoaded}
/>
</View>
<View style={styles.statusContainer}>
<Text style={styles.statusText}>
상태: {isLoaded ? '준비됨' : '로딩중'}
</Text>
{errorCode && (
<Text style={styles.errorText}>에러: {errorCode}</Text>
)}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 30,
},
loadingContainer: {
alignItems: 'center',
marginBottom: 20,
},
loadingText: {
marginTop: 10,
color: '#666',
},
buttonContainer: {
width: '100%',
marginVertical: 8,
},
statusContainer: {
marginTop: 30,
alignItems: 'center',
},
statusText: {
fontSize: 16,
color: '#333',
},
errorText: {
fontSize: 14,
color: 'red',
marginTop: 8,
},
});
export default RewardedAdScreen;