React Native+Navigation：仅在指定屏幕展示广告的技术问询

嘿，刚接触React Native和Navigation的话，这种全局广告到处跑的问题确实容易碰到～我给你两个简单可行的办法，帮你把广告只放在你想要的屏幕上：

方法1：直接把广告组件放到目标屏幕里（最推荐） #

这个办法最直观，既然你只想让广告在ScreenOne（比如你的LoginScreen）显示，那直接把AdMobBanner组件写到这个屏幕的代码里就行，其他屏幕自然不会有广告。

修改目标屏幕代码（比如LoginScreen.js） #

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { AdMobBanner } from 'react-native-admob';

class LoginScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        {/* 这里是你的登录界面原有内容 */}
        <Text>欢迎来到登录页面</Text>
        
        {/* 把广告固定在屏幕底部 */}
        <AdMobBanner 
          adSize='smartBannerLandscape' 
          adUnitID='ca-app-pub-3940256099942544/2934735716' 
          style={styles.adBanner}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  adBanner: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
  }
});

export default LoginScreen;

清理App.js里的全局广告 #

把原来App.js里的AdMobBanner删掉，只保留导航器渲染：

import React, { Component } from 'react';
import { View } from 'react-native';
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 />
      </View>
    );
  }
}

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

export default App;

方法2：通过监听路由变化全局控制广告显示 #

如果你不想修改每个屏幕的代码，想在App层面统一控制，可以监听导航的路由变化，只在目标路由显示广告。

修改App.js代码 #

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 {
  state = {
    shouldShowAd: false // 控制广告显示的状态
  };

  // 监听路由切换事件
  handleRouteChange = (prevState, currentState) => {
    // 获取当前活跃的路由名称
    const currentRoute = currentState.routes[currentState.index].routeName;
    // 只有当当前路由是你指定的屏幕（比如Login）时，显示广告
    this.setState({ shouldShowAd: currentRoute === 'Login' });
  };

  render() {
    return (
      <View style={{ height: '100%', width: '100%' }}>
        <AppStackNavigator 
          onNavigationStateChange={this.handleRouteChange}
        />
        {/* 根据状态判断是否渲染广告 */}
        {this.state.shouldShowAd && (
          <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;

小提示 #

• 如果你要指定的屏幕是DrawerNavigator里的子屏幕，需要调整路由判断逻辑，嵌套导航的路由结构会更复杂，你可以通过currentState.routes的层级找到子路由名称。
• 记得把代码里的Login替换成你实际要显示广告的屏幕路由名称（比如ScreenOne对应的路由名）。

内容的提问来源于stack exchange，提问作者James Christopher