Как скрыть рекламный баннер в автономном режиме или если реклама не может быть загружена - в React Native с Expo?

Question

Я реализовал рекламу с помощью 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

Я попробовал несколько подходов ... Проблема с onAdFailedToLoad заключалась в том, что он не работает в автономном режиме.Проблема с прослушиванием NetInfo заключалась в том, что простая реализация сообщала о состоянии сети только после изменения.

В итоге я использовал библиотеку, чтобы определить, было ли приложение подключено к сети:

https://github.com/rgommezz/react-native-offline (реализация с редуксом)

и этот подход, чтобы скрыть мой баннер admob (вложенный в MyView):

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

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

Прочитав их документы, вы получите 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 для обработки ошибок рекламы.