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

【问题标题】：How to hide ad banner offline or when no ad could be loaded - in React Native with Expo?如何在离线或无法加载广告时隐藏广告横幅 - 在 React Native with Expo 中？
【发布时间】：2018-09-25 16:35:19
【问题描述】：

我在我的 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" />

【问题讨论】：

标签： react-native mobile admob expo banner-ads

【解决方案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>
    );
  }
}

【讨论】：

【解决方案2】：

我尝试了几种方法... onAdFailedToLoad 的问题在于它在离线时似乎不起作用。收听 NetInfo 的问题在于，一个简单的实现只在更改后告诉网络状态。

我最终使用了一个库来发现该应用是否在线：

https://github.com/rgommezz/react-native-offline（用redux实现）

这种隐藏我的 admob 横幅的方法（嵌套在 MyView 中）：

https://medium.com/scripbox-engineering/how-to-hide-a-view-component-in-react-native-8a4994382c0.

【讨论】：

但是你在 onAdFailedToLoad() 中究竟写了什么代码来隐藏它？

【解决方案3】：

通过阅读他们的文档，您可以使用 2 种方法：

onAdLoaded

接受一个函数。收到广告时调用。

onAdFailedToLoad

接受一个函数。当广告请求失败时调用。

如果您处于离线状态，您可以像这样检查网络状态：

文档：https://facebook.github.io/react-native/docs/netinfo

NetInfo.getConnectionInfo().then((connectionInfo) => {
  console.log('Initial, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
});
function handleFirstConnectivityChange(connectionInfo) {
  console.log('First change, type: ' + connectionInfo.type + ', effectiveType: ' + connectionInfo.effectiveType);
  NetInfo.removeEventListener(
    'connectionChange',
    handleFirstConnectivityChange
  );
}
NetInfo.addEventListener(
  'connectionChange',
  handleFirstConnectivityChange
);

我会检查用户是否处于离线状态，或者连接不良（如果在线）呈现广告，并使用onAdFailedToLoad 方法处理广告错误。

【讨论】：

谢谢，我会试试这些方法。仍然不确定如何隐藏横幅。也许我会检查连接并仅在成功时显示横幅。
也许是三元语句？如果你卡住了，请告诉我。如果您觉得有用，请接受并投票 :)
但是你在 onAdFailedToLoad() 中究竟写了什么代码来隐藏它？
只使用真/假状态变量。