使用React Native Admob React本机导航

我用React原生导航创建了一个3页的应用程序 . Admob广告位于第3页 . 我想在所有三个屏幕上尝试相同的广告代码 . 如果对此事有任何想法，请分享 . 谢谢 .

为了更好地理解，我提供以下世博会代码 .

从'react'导入React，;从'react-native'导入{WebView，AppRegistry，StyleSheet，Text，View，Button，Alert};

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;