广告Mob

如何在React Native中添加AdMob并使用它

步骤1:安装AdMob SDK

首先，您需要安装AdMob SDK。为此，请打开终端并运行以下命令：

npx react-native install @react-native-admob/admob

或者，如果您使用npm，则可以使用以下命令：

npm install @react-native-admob/admob

步骤2:配置AdMob

接下来，需要配置AdMob。您需要创建一个新的项目并获取您的广告单元ID。您可以在Google AdMob控制台中创建一个新的项目。

在React Native项目的根目录中，创建一个名为google-services.json的文件。下载并添加到您的项目中。

步骤3:导入AdMob组件

接下来，需要导入AdMob组件。在您的React Native项目中，创建一个新文件并导入AdMob组件：

import React from 'react';
import { View, Text } from 'react-native';
import { AppLovinMAXAdapter } from '@react-native-admob';
import { AdMobInterstitial,  AdMobBanner } from '@react-native-admob';

步骤4:创建AdMob广告条

将以下代码添加到您的组件中：

render() {
  return (
    <View>
      {this.state.isAdLoaded && (
        <AdMobInterstitial
          adUnitID=""
          onAdLoaded={() => {
            console.log('Admob Interstitial ad loaded');
          }}
          onAdFailedToLoad={(e) => {
            console.error('Ad failed to load: ', e);
          }}
        />
      )}
      <AdMobBanner
        adSize="fullBanners"
        adUnitID=""
        showAdOnLoading={true}
        adFormat="rectangle"
        testDevices={[AdMob.AD_TEST_DEVICE_SIMULATOR]}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
}

步骤5:加载AdMob广告

最后，需要加载AdMob广告。在您的组件的componentDidMount方法中添加以下代码：

componentDidMount() {
  thisInterstitial.setAdUnitID('');
  thisInterstitial.requestAd();

  this.setState({
    isAdLoaded: true,
  });
}

现在，您应该能够在React Native应用程序中成功加载AdMob广告。