插屏广告

import React, { useState } from 'react';
import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { AdRequestConfiguration, InterstitialAd, InterstitialAdLoader } from 'yandex-mobile-ads';

const INTERSTITIAL_AD_UNIT_ID = 'demo-interstitial-yandex'; // 替换为您的 ID

export default function InterstitialView() {
  const [isLoaded, setIsLoaded] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [interstitialAd, setInterstitialAd] = useState<InterstitialAd | null>(null);

  const loadAd = async () => {
    try {
      setIsLoading(true);

      // 1. 创建加载器
      const loader = await InterstitialAdLoader.create();

      // 2. 创建请求配置
      const adRequestConfiguration = new AdRequestConfiguration({
        adUnitId: INTERSTITIAL_AD_UNIT_ID,
      });

      // 3. 加载广告
      const ad = await loader.loadAd(adRequestConfiguration);

      console.log('Interstitial ad loaded');

      // 4. 配置事件处理程序
      ad.onAdShown = () => {
        console.log('Interstitial ad shown');
      };

      ad.onAdDismissed = () => {
        console.log('Interstitial ad dismissed');
        setIsLoaded(false);
        setInterstitialAd(null);
      };

      ad.onAdClicked = () => {
        console.log('Interstitial ad clicked');
      };

      ad.onAdImpression = (impressionData) => {
        console.log('Interstitial impression:', impressionData);
      };

      ad.onAdFailedToShow = (error) => {
        console.error('Interstitial failed to show:', error);
        Alert.alert('Ad Failed to Show', JSON.stringify(error));
        setIsLoaded(false);
      };

      setInterstitialAd(ad);
      setIsLoaded(true);
      setIsLoading(false);

    } catch (error) {
      console.error('Failed to load interstitial ad:', error);
      Alert.alert('Ad Failed to Load', JSON.stringify(error));
      setIsLoading(false);
      setIsLoaded(false);
    }
  };

  const showAd = () => {
    if (interstitialAd && isLoaded) {
      interstitialAd.show();
    } else {
      Alert.alert('Ad not ready', 'Please load the ad first');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Interstitial Ad</Text>

      <TouchableOpacity
        style={[styles.button, isLoading && styles.buttonDisabled]}
        onPress={loadAd}
        disabled={isLoading}
      >
        <Text style={styles.buttonText}>
          {isLoading ? 'Loading...' : 'Load Ad'}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={[styles.button, styles.showButton, !isLoaded && styles.buttonDisabled]}
        onPress={showAd}
        disabled={!isLoaded}
      >
        <Text style={styles.buttonText}>Show Ad</Text>
      </TouchableOpacity>

      <Text style={styles.status}>
        {isLoaded ? '✅ Ad Ready' : '❌ Ad Not Loaded'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 40,
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 15,
    paddingHorizontal: 40,
    borderRadius: 10,
    marginVertical: 10,
    width: '80%',
    alignItems: 'center',
  },
  showButton: {
    backgroundColor: '#34C759',
  },
  buttonDisabled: {
    backgroundColor: '#ccc',
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: '600',
  },
  status: {
    marginTop: 30,
    fontSize: 16,
    color: '#666',
  },
});