React Native导航应用中复用Admob广告代码的实现方案咨询

Hey there! 我来帮你解决在三个页面复用AdMob广告代码的问题，核心思路就是把广告逻辑封装成独立可复用的组件，这样每个页面都能轻松引入使用，不用重复写相同代码。下面是具体的实现方案，结合你的现有代码来调整：

先新建一个单独的组件文件，比如AdMobBanner.js，把广告的初始化、渲染和状态处理都放在这里，让所有页面共享这部分逻辑：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'expo-ads-admob';

// 注意：正式上线要替换成你的真实AdMob广告ID，测试阶段用官方测试ID避免违规
const AD_UNIT_ID = __DEV__ ? TestIds.BANNER : '你的真实广告单元ID';

const AdMobBanner = () => {
  return (
    <View style={styles.adContainer}>
      <BannerAd
        unitId={AD_UNIT_ID}
        size={BannerAdSize.BANNER}
        onAdLoaded={() => console.log('广告加载成功')}
        onAdFailedToLoad={(error) => console.error('广告加载失败:', error)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  adContainer: {
    // 可根据需求调整位置，比如固定在页面底部
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  },
});

export default AdMobBanner;

现在你只需要在需要展示广告的页面里导入这个组件，直接添加到render方法中即可，完全不用重复写广告相关代码：

修改第一个页面（App组件） #

import React, { Component } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { StackNavigator } from 'react-navigation';
import ListComponent from './ListComponent';
// 导入广告组件
import AdMobBanner from './AdMobBanner';

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" />
        {/* 添加广告组件 */}
        <AdMobBanner />
      </View>
    );
  }
}

修改第二个页面（SecondActivity组件） #

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} />
        {/* 添加广告组件 */}
        <AdMobBanner />
      </View>
    );
  }
}

修改第三个页面（ThirdActivity组件） #

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

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Text>3</Text>
        {/* 添加广告组件 */}
        <AdMobBanner />
      </View>
    );
  }
}

• 如果需要动态控制广告显示/隐藏，可以给AdMobBanner组件添加visible属性，通过条件渲染实现；
• 对于插页广告（Interstitial Ad），可以封装成工具类，提供统一的showInterstitial方法，各个页面直接调用即可；
• 记得在Expo项目的app.json中配置AdMob相关权限，确保广告能正常加载。

这样一来，三个页面就都能复用相同的广告代码了，以后要修改广告样式或ID，只需要调整AdMobBanner.js这一个文件就可以啦！

内容的提问来源于stack exchange，提问作者Ramazan Gül