react-native-admobでキーボードが表示/非表示時に広告が再描画される現象の対応方法

React Nativeでポケモン対戦支援ツールというAndoridアプリを作った際に、広告表示にreact-native-admobというnpmパッケージを使いました。
その際に、キーボードが非表示になると広告が再描画されて、画面がカクつく現象に遭遇した時の対処法を残しておきます。

解決方法

キーボード表示時はAdMobを非表示、キーボード非表示時はAdMobを表示する事で現象を回避しました。

サンプルコード

constructor(props) {
  super(props);
  // Admobの表示/非表示を切り替えるstateを用意する
  this.state = { isShow: true };
}
componentDidMount () {
  this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardDidShow);
  this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardDidHide);
}

componentWillUnmount () {
  this.keyboardDidShowListener.remove();
  this.keyboardDidHideListener.remove();
}

// Keyboardが表示状態になった時
keyboardDidShow = () => {
  this.setState({isShow: false})
}

// Keyboardが非表示状態になった時
keyboardDidHide = () => {
  this.setState({isShow: true})
}

styleでKeyboardが表示状態になった時は、AdMobBannerが非表示になるように設定

<AdMobBanner 
  style = {this.state.isShow ? null : { display: 'none' }}
  adSize = "fullBanner"
  adUnitID = "admob-unit-id"
  testDevices = {[AdMobBanner.simulatorId]}
  onAdFailedToLoad = {error => console.error(error)} />

未分類React

Posted by ababa