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

Question

我在我的反应原生应用程序中实现了带有博览会和 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>
);
}
}

Answer 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。

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

Answer 4

这是一个钩子解决方案。

本质上，您要检查广告是否已加载，如果没有将横幅高度设置为 0，以便它不会留下空白空间。

function MyAdContainer() {
const [adLoaded, setAdLoaded] = useState(false) // initialize unloaded
function handleAdLoaded() {
setAdLoaded(true);
}
const containerStyles = adLoaded ? styles.bannerContainer : { height: 0 }; 
return (
<View style={containerStyles}>
<BannerAd
onAdLoaded={handleAdLoaded}
{...OTHER_PROPS}
/>
</View>
);
} 

在这种情况下，广告是否失败或用户处于离线状态并不重要，因为它初始化为false.因此，只有在广告成功加载的情况下，我们才会为该组件提供高度。