AdMob插页式广告只显示一次React Native

Question

import { InterstitialAd, AdEventType, TestIds } from '@react-native-firebase/admob';

const adUnitId = __DEV__ ? TestIds.INTERSTITIAL : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

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

function App() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    const eventListener = interstitial.onAdEvent(type => {
      if (type === AdEventType.LOADED) {
        setLoaded(true);
      }
    });

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

    // Unsubscribe from events on unmount
    return () => {
      eventListener();
    };
  }, []);

  // No advert ready to show yet
  if (!loaded) {
    return null;
  }

  return (
    <Button
      title="Show Interstitial"
      onPress={() => {
        interstitial.show();
      }}
    />
  );
}

当我第一次点击按钮时，广告会显示出来。但是当我再次点击按钮时，它会抛出一个错误。

错误：firebase.admob().InterstitialAd.show() 请求的插页式广告尚未加载，无法显示。

我该怎么解决？我想每次点击按钮时都显示广告。

- Suman Bhattarai

Answer 1

import {
  InterstitialAd,
  AdEventType,
  TestIds
} from '@react-native-firebase/admob';

const adUnitId = __DEV__
  ? TestIds.INTERSTITIAL
  : 'ca-app-pub-xxxxxxxxxxxxx/yyyyyyyyyyyyyy';

const interstitialAd = InterstitialAd.createForAdRequest(adUnitId);

export default class App extends Component {

componentDidMount() {

    interstitialAd.onAdEvent(type => {
      if (type === AdEventType.LOADED) {
        console.log('InterstitialAd adLoaded');
      } else if (type === AdEventType.ERROR) {
        console.warn('InterstitialAd => Error');
      } else if (type === AdEventType.OPENED) {
        console.log('InterstitialAd => adOpened');
      } else if (type === AdEventType.CLICKED) {
        console.log('InterstitialAd => adClicked');
      } else if (type === AdEventType.LEFT_APPLICATION) {
        console.log('InterstitialAd => adLeft_App');
      } else if (type === AdEventType.CLOSED) {
        console.log('InterstitialAd => adClosed');
        interstitialAd.load();
      }
    });

interstitialAd.load();

}

showAd() {
    if (interstitialAd.loaded) {
      interstitialAd.show().catch(error => console.warn(error));
    }
  }

render() {
    return (

     <Button
       title="Show Interstitial"
       onPress={() => {
         this.showAd();
      }}
    />

)}

以下是一个实际生产代码片段 - ENJOY！

- hkniyi