React Native AdMob 开源项目安装与使用指南

React Native AdMob 开源项目安装与使用指南

admobAdmob for React Native with powerful hooks and components项目地址:https://gitcode.com/gh_mirrors/adm/admob

1. 项目目录结构及介绍

React Native AdMob 是一个用于在 React Native 应用中集成 Google AdMob 的库。其目录结构大致如下：

react-native-admob/
├── android/               # Android 相关的代码和资源
│   ├── src/                 # Android 原生代码
│   └── ...                   # 其他Android配置文件
├── ios/                     # iOS 相关的代码和资源
│   ├── RNAdMob.h             # iOS 接口头文件
│   ├── RNAdMob.m             # iOS 实现文件
│   └── ...                   # 其他iOS配置文件
├── example/                 # 示例应用，含AdMob功能的演示
│   ├── android/              # 示例应用的Android目录
│   ├── ios/                  # 示例应用的iOS目录
│   └── src/                  # 示例应用的React Native代码
├── src/                      # 主要JavaScript源码，提供了AdMob相关的React组件和方法
│   ├── AdMob.js                # AdMob的主要组件封装
│   ├── banner.js              # 广告横幅相关代码
│   └── ...                     # 其它广告类型的JS实现
├── package.json            # Node包管理文件，定义了项目的依赖和脚本
└── README.md                # 项目说明文档，包括安装步骤和基本使用说明

说明：android 和 ios 目录下是原生平台的具体实现，example 提供了一个完整的运行示例，而 src 则是React Native部分的源码，核心在于提供给开发者调用的API。

2. 项目的启动文件介绍

虽然该库本身没有单一的“启动”文件，但若谈论如何开始使用，在React Native的项目里，你通常会在一个入口文件（如App.js）或者特定的广告展示组件文件中引入并初始化AdMob。例如：

import { AdMobBanner } from 'react-native-admob';

// 在你的组件内部初始化或展示广告
componentDidMount() {
    AdMob.setTestDeviceID('EMULATOR'); // 测试设备时使用
    AdMob.requestBannerAdAsync({adUnitID: 'your_ad_unit_id'}).then(ad => {
        this.setState({ ad });
    });
}

render() {
    return this.state.ad ? <AdMobBanner adUnitID='your_ad_unit_id' bannerSize='smartBanner' /> : null;
}

这里的重点在于通过导入AdMobBanner组件，并使用相应的API来设置和显示广告。

3. 项目的配置文件介绍

Android配置

在使用前，你需要在AndroidManifest.xml添加权限：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

并且，在android/app/build.gradle文件中加入AdMob的依赖：

dependencies {
    ...
    implementation 'com.google.android.gms:play-services-ads:latest-version'
}

iOS配置

对于iOS，确保在info.plist中添加数据跟踪相关的用户同意声明（若适用）。此外，需在Podfile中添加AdMob的依赖：

pod 'Google-Mobile-Ads-SDK', '~> latest-version'

随后执行pod install命令以安装这些依赖。

注意：上述中的latest-version应替换为实际的最新版本号，获取具体版本可以查看GitHub页面的最新发行版注释或访问NPM包发布的版本信息。正确配置并理解这些基础模块是成功集成AdMob的关键。

admobAdmob for React Native with powerful hooks and components项目地址:https://gitcode.com/gh_mirrors/adm/admob