Question

我在我的react本机应用程序中使用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

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

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方法处理广告错误。

Answer 2

我对这个问题的解决方案是将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>
    );
  }
}

Answer 3

我尝试了几种方法... 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。

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

3 个答案: