AdMob 插页式广告仅在原生反应后显示

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() 请求的插页式广告尚未加载，无法显示。

我该如何解决这个问题？我想在每次点击按钮时显示广告。

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();
      }}
    />

)}

这实际上是生产代码的一个片段 - 享受吧！