如何在 React Native 和 Expo 中离线隐藏广告横幅或无法加载广告时？

Question

我在我的 React Native 应用程序中使用 expo 和 admob 实现了广告，但我想在没有加载广告时摆脱空白/阻塞空间。还没有找到任何例子。（除了横幅之外，我在该页面上有一个标题和滚动视图）。这就是 Admob 横幅的实现方式：

// Display a banner
<AdMobBanner
  bannerSize="fullBanner"
  adUnitID="ca-app-pub-3940256099942544/6300978111" // Test ID, Replace    with your-admob-unit-id
  testDeviceID="EMULATOR" />

Answer 1

我对此问题的解决方案是将 admob 组件包装在视图中，并使用样式将高度设置为零。当您收到广告时。然后更新样式以在视图中显示横幅

export class AdContainer extends React.Component {
  constructor() {
    super();
    this.state = { height: 0 };
  }

  bannerError(e) {
    console.log('banner error: ');
    console.log(e);
  }
  adReceived() {
    console.log('banner ad received: ');
    this.setState({
      ...this.state,
      hasAd: true
    });
  }
  adClicked() {
    console.log('banner ad clicked: ');
  }

  render() {
    return (
      <View style={!this.state.hasAd ? { height: 0 } : {}}>
        <View>
          <AdMobBanner
            bannerSize="smartBannerPortrait" // "largeBanner" "fullBanner"
            adUnitID={BANNER_ID}
            testDeviceID="EMULATOR"
            onDidFailToReceiveAdWithError={this.bannerError}
            onAdViewDidReceiveAd={this.adReceived.bind(this)}
            onAdViewWillPresentScreen={this.adClicked.bind(this)}
          />
        </View>
      </View>
    );
  }
}