React Native Navigation с помощью React Native Admob О программе

Question

Я создал 3-страничное приложение с встроенной навигацией React.Объявления Admob находятся на 3-й странице.Я хочу попробовать один и тот же рекламный код на всех трех экранах.Если есть какие-либо идеи по этому вопросу, пожалуйста, поделитесь.Спасибо.

Для лучшего понимания я даю следующий код экспозиции:

import React, {Component} из 'response';import {WebView, AppRegistry, StyleSheet, Text, View, Button, Alert} из'act-native ';

import { StackNavigator } from 'react-navigation';

import ListComponent from './ListComponent';

class App extends Component {
  static navigationOptions = {
    title: 'App',
  };

  OpenSecondActivityFunction = () => {
    this.props.navigation.navigate('Second');
  };

  render() {
    return (
      <View style={styles.container}>

        <Button
          onPress={this.OpenSecondActivityFunction}
          title="Open Second Activity"
        />
      </View>
    );
  }
}

class SecondActivity extends Component {
  static navigationOptions = {
    title: 'SecondActivity',
  };

  OpenThirdActivityFunction = data => {

    this.props.navigation.navigate('Third');
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ListComponent
          OpenThirdActivityFunction={this.OpenThirdActivityFunction}
        />
      </View>
    );
  }
}

class ThirdActivity extends Component {
  static navigationOptions = {
    title: 'ThirdSecondActivity',
  };

  render() {
    return (
      <View style={{ flex: 1 }}>

        <Text>3</Text>

      </View>
    );
  }
}

const ActivityProject = StackNavigator({
  First: { screen: App },

  Second: { screen: SecondActivity },

  Third: { screen: ThirdActivity },
});

export default ActivityProject;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  } 
});

Listcomponent.js

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Text,
  FlatList,
  ActivityIndicator,
} from 'react-native';
import { List, ListItem, SearchBar } from 'react-native-elements';

class ListComponents extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      data: [],
      page: 1,
      seed: 1,
      error: null,
      refreshing: false,
    };
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: '98%',
          backgroundColor: '#CED0CE',
          marginLeft: '2%',
        }}
      />
    );
  };

  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />;
  };

  renderFooter = () => {
    if (!this.state.loading) return null;

    return (
      <View
        style={{
          paddingVertical: 20,
          borderTopWidth: 1,
          borderColor: '#CED0CE',
        }}>
        <ActivityIndicator animating size="large" />
      </View>
    );
  };

  render() {
    return (
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={[{ name: 1, coders: 2 }]}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar
              title={`${item.name}`}
              subtitle={item.coders}
              containerStyle={{ borderBottomWidth: 0 }}
              onPress={() => this.props.OpenThirdActivityFunction(item.coders)}
            />
          )}
          keyExtractor={item => item.coders}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          ListFooterComponent={this.renderFooter}
        />
      </List>
    );
  }
}

export default ListComponents;