Question

我是新手来回应原生和导航，并想询问如何仅在特定屏幕上展示广告？例如，我只想在ScreenOne上展示广告，但不想在ScreenTwo或ScreenThree上展示广告等。

现在我正在使用react-native-admob来展示广告并在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 {

  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

好的，我们假设您想在登录屏幕上显示广告，您可以在app.js上导入您的HOC，然后

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

其中withAd是您在此处创建和导入的HOC，或者您可以更改LoginComponent，在文件本身上返回withAd（LoginComponent）并继续使用您的方式，您做出的决定是，如果，您每时每刻都需要带有广告的屏幕，或者只需要使用此导航器。

编辑：要在所有屏幕上使用相同的广告，我建议你使用一些状态商店，redux，mobx甚至React New Context API来存储，如果屏幕应该呈现广告，你可以在其中包装adBanner组件，并设置一些逻辑来检查是否应该呈现广告，当您更改为应该或不应显示的屏幕时，您会调度操作来更改该变量，并且adBanner将相应地重新呈现。

仅在特定屏幕上显示广告（React Native＆amp; Navigation）

1 个答案: