Рендеринг баннера Admob в рамках реакции на нативные плоские списки - PullRequest
Новая
       32

Рендеринг баннера Admob в рамках реакции на нативные плоские списки

0 голосов
/ 07 июля 2019

Я интегрировал реактивную базу-оригинал-firebase и модуль AdMob в свой собственный проект-реактив, и все работает как положено (тестирование рекламы и рекламы в производстве).Теперь я хочу добавить баннеры в свой плоский список (рендеринг баннера каждые X строк).

это пример данных, которые я получаю с сервера: 

[
  {
   ...item 1 details
  },{
   ...item 2 details
  },{
   ...ad details
  },{
   ...item 3 details
  },{
   ...item 4 details
  },{
   ...ad details
  }
]

и это компонент Flatlist 

class ItemsList extends React.Component {
  _renderItem = ({item, index}) => {

    if (item.isAd) {
      const unitId = Platform.OS === "ios" ? item.adIdIOS : item.adIdAndroid;
      const Banner = firebase.admob.Banner;
      const AdRequest = firebase.admob.AdRequest;
      const request = new AdRequest();
      const keyWords = item.admobKeywords || [];
      keyWords.forEach(keyword => {
        request.addKeyword(keyword);
      });

      return (
        <View style={{ width:"100%", height: item.adHeight || "auto", marginTop: 5, marginBottom: 15, alignItems: 'center', justifyContent: 'center' }}>
          <Banner
            size={item.adSize}
            request={request.build()}
            unitId={unitId}
            onAdLoaded={() => {}}
          />
        </View>
      )

    } else {
     renderItem()
    }
  }

  render() {
    return(
        <View>
          <FlatList 
            data={this.state.data}
            renderItem={this._renderItem}
            ...
          />
        </View>
    )
  };
};

проблема в том, что всякий раз, когда происходит событие прокрутки (пользователь прокручивает вниз), Flatlist продолжает повторную визуализацию баннера (запускает новый запрос), и баннер продолжает обновляться.Через некоторое время запускается много запросов и происходит сбой приложения!

Я знаю, что вызов сетевого запроса внутри метода renderItem не является хорошей практикой, поэтому я также попробовал следующее, но проблема остается той же: 

const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();

class CatalogueSalesList extends React.Component {
  _renderItem = ({item, index}) => {

    if (item.isAd) {
      const unitId = Platform.OS === "ios" ? item.adIdIOS : item.adIdAndroid;
      const keyWords = item.admobKeywords || [];
      keyWords.forEach(keyword => {
        request.addKeyword(keyword);
      });

      return (
        <View style={{ width:"100%", height: item.adHeight || "auto", marginTop: 5, marginBottom: 15, alignItems: 'center', justifyContent: 'center' }}>
          <Banner
            size={item.adSize}
            request={request.build()}
            unitId={unitId}
            onAdLoaded={() => {}}
          />
        </View>
      )

    } else {
     renderItem()
    }
  }

  render() {
    return(
        <View>
          <FlatList 
            data={this.state.data}
            renderItem={this._renderItem}
            ...
          />
        </View>
    )
  };
};

Может кто-нибудь предложить мне решение о том, как баннерная реклама может быть реализована внутри Flatlist без повторной визуализации баннера каждый раз, когда пользователь просматривает список?

версия, которую я использую: 

"react-native": "0.59.9",
"react-native-firebase": "~5.5.3"
...