Отображение рекламы только на определенном экране (React Native & Navigation)

Question

Я новичок, чтобы реагировать на родной язык и навигацию, и хочу спросить, как показывать рекламу только на определенном экране?Например, я хочу показывать рекламу только на ScreenOne, но не на ScreenTwo или ScreenThree и т. Д.

Сейчас я использую Reaction-native-admob для показа рекламы и написания кода в App.js *.1003 *

Мой код примерно такой:

import React, { Component } from 'react';
import { 
  View
  } from 'react-native';
import { AdMobBanner } from 'react-native-admob';
import { createStackNavigator } from 'react-navigation';
import LoginScreen from './screens/LoginScreen';
import StrataScreen from './screens/StrataScreen';
import DrawerNavigator from './screens/DrawerNavigator';

class App extends Component {

  render() {
    return (
        <View style={{ height: '100%', width: '100%' }}>
          <AppStackNavigator />
          <AdMobBanner
            adSize='smartBannerLandscape'
            adUnitID='ca-app-pub-3940256099942544/2934735716'
          />
        </View>
    );
  }
}

const AppStackNavigator = createStackNavigator(
  {
  Login: LoginScreen,
  Strata: StrataScreen,
  Drawer: {
    screen: DrawerNavigator,
    navigationOptions: {
      header: null
    }
  }
  },
  {
    initialRouteName: 'Login',
    navigationOptions: {
      gestureEnabled: false
    }
  }
);

export default App;

Answer 1

Вы должны взглянуть на компоненты высокого порядка, написать компонент, который возвращает сам компонент, плюс adMobBanner, а затем использовать возврат экрана, который вы хотите обернуть внутри этого HOC.

https://reactjs.org/docs/higher-order-components.html

Хорошо, предположим, что вы хотите разместить объявление на экране входа в систему, вы можете импортировать HOC в app.js и сделать

const AppStackNavigator = createStackNavigator(
  {
  Login: withAd(LoginScreen),
  Strata: StrataScreen,
  Drawer: {
    screen: DrawerNavigator,
    navigationOptions: {
      header: null
    }
  }
  },
  {
    initialRouteName: 'Login',
    navigationOptions: {
      gestureEnabled: false
    }
  }
);

, где withAd - это HOC, который вы создали и импортировали здесь., или вы можете изменить свой LoginComponent в самом файле, чтобы он возвращался с помощью Ad (LoginComponent), и просто продолжать использовать то, что вы есть, решение, которое у вас есть, состоит в том, если вам понадобится этот экран с рекламой в любой момент или просто сэтот навигатор.

Редактировать: чтобы иметь одно и то же объявление на всех экранах, я бы порекомендовал вам использовать какое-либо хранилище состояний, или Redx, Mobx или даже React New Context API для хранения, если экран должен отображать рекламу,где вы можете привязать свой adBanner к компоненту и поместить некоторую логику, чтобы проверить, следует ли показывать рекламу, где, когда вы переходите на экран, вы должны или не должныТаким образом, вы отправляете действие, чтобы изменить эту переменную, и adBanner выполнит повторную визуализацию соответственно.