React Native Google Mobile Ads 使用教程

React Native Google Mobile Ads 使用教程

react-native-google-mobile-ads React Native Google Mobile Ads enables you to monetize your app with AdMob. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-google-mobile-ads

1. 项目介绍

React Native Google Mobile Ads 是一个用于在 React Native 应用中集成 Google AdMob 广告的开源项目。该项目通过封装原生的 Google Mobile Ads SDK，使得开发者能够轻松地在 iOS 和 Android 平台上实现广告的展示和收益。

该项目的主要特点包括：

• 高测试覆盖率：项目经过广泛的测试，覆盖率超过 95%。
• TypeScript 支持：提供一流的 TypeScript 支持，确保类型安全。
• 完善的文档：提供详细的安装指南、使用说明和常见问题解答。

2. 项目快速启动

安装依赖

首先，确保你已经安装了 react-native-google-mobile-ads 包。你可以通过 npm 或 yarn 进行安装：

npm install react-native-google-mobile-ads
# 或者
yarn add react-native-google-mobile-ads

配置 iOS 和 Android

iOS

1. 在 ios/Podfile 中添加以下内容：

pod 'Google-Mobile-Ads-SDK'

2. 运行 pod install：

cd ios && pod install

Android

1. 在 android/app/build.gradle 中添加以下依赖：

implementation 'com.google.android.gms:play-services-ads:20.4.0'

2. 在 AndroidManifest.xml 中添加 AdMob App ID：

<manifest>
  <application>
    <meta-data
      android:name="com.google.android.gms.ads.APPLICATION_ID"
      android:value="YOUR_ADMOB_APP_ID"/>
  </application>
</manifest>

显示广告

在你的 React Native 组件中，你可以使用以下代码来显示一个横幅广告：

import React from 'react';
import { View } from 'react-native';
import { BannerAd, BannerAdSize, TestIds } from 'react-native-google-mobile-ads';

const App = () => {
  return (
    <View>
      <BannerAd
        unitId={TestIds.BANNER}
        size={BannerAdSize.BANNER}
        requestOptions={{
          requestNonPersonalizedAdsOnly: true,
        }}
      />
    </View>
  );
};

export default App;

3. 应用案例和最佳实践

应用案例

React Native Google Mobile Ads 可以用于各种类型的应用，包括但不限于：

• 新闻应用：在文章底部展示横幅广告。
• 游戏应用：在游戏关卡之间展示插页广告。
• 工具应用：在功能页面之间展示原生广告。

最佳实践

• 广告频率控制：避免在短时间内频繁展示广告，以免影响用户体验。
• 个性化广告设置：根据用户偏好设置广告展示选项，如非个性化广告。
• 测试模式：在开发和测试阶段使用测试广告 ID，避免误点击和误展示。

4. 典型生态项目

• React Native Firebase：与 Firebase 集成，实现更复杂的用户分析和广告管理。
• React Native Navigation：结合导航库，实现广告在不同页面之间的无缝展示。
• React Native Paper：与 Material Design 组件库结合，实现原生广告的更好展示效果。

通过以上步骤，你可以快速上手并集成 React Native Google Mobile Ads，为你的应用带来收益。

react-native-google-mobile-ads React Native Google Mobile Ads enables you to monetize your app with AdMob. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-google-mobile-ads