# react-native-bloom-ad

> Bloom AD React-Native SDK

Latest version **2.0.8** (published 2020-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-bloom-ad
pnpm add react-native-bloom-ad
yarn add react-native-bloom-ad
bun add react-native-bloom-ad
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.8 |
| Published | 2020-11-19 |
| First published | 2020-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | maofaming |
| Maintainers | bloomadtech |
| Keywords | react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-bloom-ad
- Repository: https://github.com/bloomadinc/react-native-bloom-ad
- Homepage: https://github.com/bloomadinc/react-native-bloom-ad#readme
- Issues: https://github.com/bloomadinc/react-native-bloom-ad/issues
- npm.io page: https://npm.io/package/react-native-bloom-ad

## Recent versions

- 2.0.8 (latest) — 2020-11-19
- 2.0.7 — 2020-11-18
- 2.0.6 — 2020-11-11
- 2.0.5 — 2020-11-11
- 2.0.3 — 2020-10-26
- 2.0.2 — 2020-10-22
- 2.0.1 — 2020-10-21
- 2.0.0 — 2020-10-19
- 1.0.17 — 2020-08-12
- 1.0.16 — 2020-08-07
- 1.0.15 — 2020-07-17
- 1.0.13 — 2020-07-02
- 1.0.12 — 2020-06-28
- 1.0.11 — 2020-06-17
- 1.0.10 — 2020-06-04
- … 7 more at https://npm.io/package/react-native-bloom-ad/versions

## README

# Bloom AD React-Native SDK 接入文档

## 概述

本文档描述了 react-native 开发者如何集成 Bloom AD SDK（后面简称为 AdSdk），通过集成 AdSdk 展示广告创造收益。 AdSdk 提供了以下几种广告形式：SplashAd（开屏广告）、RewardVideoAd（激励视频广告）、BannerAd（横幅广告）、NativeExpressAd（原生广告）、InterstitialAd（插屏广告）、DrawVideoAd（Draw 视频广告）等。**暂时只支持 Android 客户端，ios 开发中。**

#### 术语介绍

AppId：应用程序 id，以 ba 开头的 18 位 hex 字符串，如 ba0063bfbc1a5ad878；

## SDK 集成

### 1、添加 NPM

`$ npm install react-native-bloom-ad --save`

或

`$ yarn add react-native-bloom-ad --save`

react native 版本号为 0.60 以下的需要手动 link

`$ react-native link react-native-bloom-ad`

### 2、添加 Maven 仓库地址

```
allprojects {
    repositories {
        maven {
            credentials {
                username 'iqLuKm'
                password 'pomH01oYcR'
            }
            url 'https://repo.rdc.aliyun.com/repository/117933-release-sPkE7F/'
        }
    }
}
```

## SDK 使用

```javascript
import BloomAd, {
  BannerView,
  NativeExpress,
  DrawVideo,
  VideoStreaming,
  NewsPortal,
} from "react-native-bloom-ad";
```

## SDK 初始化

开发者需要初始化 AppId 后才能使用相关功能。例如：

```javascript
BloomAd.init("ba0063bfbc1a5ad878")
  .then((appId) => {
    // 初始化成功
    BloomAd.showSplash(); // 加载开屏
  })
  .catch((error) => {
    // 初始化失败
    console.log(error);
  });
```

登录时请设置 userId：

```
BloomAd.setUserId("uid");
```

退出登录请重置 userId：

```
BloomAd.setUserId();
```

## SDK 返回参数说明

params 参数说明：

| 参数    | 说明           | 类型   | 说明               |
| ------- | -------------- | ------ | ------------------ |
| type    | 广告状态       | string | -                  |
| id      | 广告 Id        | int    | -                  |
| code    | 返回的错误代码 | int    | type 为 onError 时 |
| message | 返回的错误消息 | string | type 为 onError 时 |

## 开屏广告接入

开屏广告以 App 启动作为曝光时机，提供 5s 的可感知广告展示。用户可以点击广告跳转到目标页面；或者点击右上角的“跳过”按钮，跳转到 app 主页。

使用接口调用，调用示例如下：

```javascript
const interval = 1000 * 60 * 3; // 设置时间间隔，单位是毫秒，切到后台后超过间隔返回时重新加载开屏
BloomAd.showSplash({
  unitId: "s1", // 广告位 id
  time: interval,
  onAdDismiss(params) {
    // 广告被关闭
    console.log(params);
  },
  onError(params) {
    // 广告出错
    console.log(params);
  },
});
```

**强烈建议**：App 切到后台超过三分钟返回时加载开屏，以提升开屏广告的曝光量.

## 激励视频广告接入

激励视频广告是指将短视频融入到 app 场景当中，用户观看完激励视频广告后可以得到一些应用内奖励。使用场景包括但不限于： 1、游戏等应用内观看视频广告获得游戏内金币等：用户必须观看完整视频才能获取奖励； 2、积分类应用接入。

使用接口调用，调用示例如下：

```javascript
BloomAd.rewardVideo({
  unitId: "rv1", // 广告位 id
  // showWhenCached: false, // 是否完全加载后才开始播放
  onAdLoad(params) {
    // 广告加载成功
    console.log(params);
  },
  onVideoCached(params) {
    // 视频素材缓存成功
    console.log(params);
  },
  onAdShow(params) {
    // 广告页面展示
    console.log(params);
  },
  onReward(params) {
    // 广告激励发放
    console.log(params);
  },
  onAdClick(params) {
    // 广告被点击
    console.log(params);
  },
  onVideoComplete(params) {
    // 广告播放完毕
    console.log(params);
  },
  onAdClose(params) {
    // 广告被关闭
    console.log(params);
  },
  onError(params) {
    // 广告出错
    console.log(params);
  },
});
```

## 横幅广告接入

Banner 广告（横幅广告）位于 app 顶部、中部、底部任意一处，横向贯穿整个 app 页面；当用户与 app 互动时，Banner 广告会停留在屏幕上，并可在一段时间后自动刷新。需要设置组件的 width 和 height。

使用组件方式调试，调用示例如下：

```javascript
const unitId = "b1"; // 广告位 id
<BannerView
  style={{
    width: 332,
    height: 52,
  }}
  unitId={unitId}
  onChange={(params) => {
    console.log(params);
  }}
/>;
```

params.type 说明：

| type      | 说明         |
| --------- | ------------ |
| onAdLoad  | 广告加载成功 |
| onAdShow  | 广告页面展示 |
| onAdClose | 广告被关闭   |
| onAdClick | 广告被点击   |
| onError   | 广告出错     |

## 原生广告接入

原生模板广告，支持图文和视频样式，开发者不用自行对广告样式进行编辑和渲染，可直接调用相关接口获取广告 view。需要设置组件的 width 和 height。由于原生广告高度不确定，可适当设置大一点。

使用组件方式调试，调用示例如下：

```javascript
const unitId = "n1"; // 广告位 id
<NativeExpress
  style={{
    width: 332,
    height: 200,
  }}
  unitId={unitId}
  count={1} // 请求广告数量
  onChange={(params) => {
    console.log(params);
  }}
/>;
```

params.type 说明：

| type      | 说明         |
| --------- | ------------ |
| onAdLoad  | 广告加载成功 |
| onAdShow  | 广告页面展示 |
| onAdClose | 广告被关闭   |
| onAdClick | 广告被点击   |
| onError   | 广告出错     |

## 插屏广告接入

插屏广告是移动广告的一种常见形式，在应用开流程中弹出，当应用展示插页式广告时，用户可以选择点击广告，访问其目标网址，也可以将其关闭，返回应用。

使用接口调用，调用示例如下：

```javascript
BloomAd.interstitial({
  unitId: "i1", // 广告位 id
  width: 300, // 插屏广告广告宽度
  onAdLoad(params) {
    // 广告加载成功
    console.log(params);
  },
  onAdShow(params) {
    // 广告页面展示
    console.log(params);
  },
  onAdClick(params) {
    // 广告被点击
    console.log(params);
  },
  onAdClose(params) {
    // 广告被关闭
    console.log(params);
  },
  onError(params) {
    // 广告出错
    console.log(params);
  },
});
```

## Draw 视频广告接入

竖版视频信息流广告，该广告适合在竖版全屏视频流中使用，接入方可以控制视频暂停或继续播放，默认视频播放不可干预。需要设置组件的 width 和 height。

使用组件方式调试，调用示例如下：

```javascript
const unitId = "dv1"; // 广告位 id
<DrawVideo
  style={{
    width: "100%",
    height: "100%",
    position: "absolute",
  }}
  unitId={unitId}
  count={1} // 请求广告数量
  onChange={(params) => {
    console.log(params);
  }}
/>;
```

params.type 说明：

| type            | 说明         |
| --------------- | ------------ |
| onAdLoad        | 广告加载成功 |
| onAdShow        | 广告页面展示 |
| onAdClick       | 广告被点击   |
| onVideoStart    | 广告播放开始 |
| onVideoPause    | 广告播放暂停 |
| onVideoResume   | 广告播放恢复 |
| onVideoComplete | 广告播放完毕 |
| onError         | 广告出错     |

## 视频流接入

开发者需要初始化 AppId 后才能使用相关功能。例如：

```javascript
<VideoStreaming
  appId="ba0063bfbc1a5ad878"
  style={{
    width: width,
    height: height,
    backgroundColor: "blue",
  }}
  play={true}
  onChange={(params) => {
    console.log("params", params);
  }}
/>
```

### params 参数说明：

| 参数      | 说明           | 类型   | 说明               |
| --------- | -------------- | ------ | ------------------ |
| type      | 广告状态       | string | -                  |
| id        | 视频 Id        | string | -                  |
| videoType | 视频类型       | string | 1:视频，2:广告     |
| code      | 返回的错误代码 | int    | type 为 onError 时 |
| message   | 返回的错误消息 | string | type 为 onError 时 |

params.type 说明：

| type            | 说明           |
| --------------- | -------------- |
| onVideoShow     | 视频切换展示   |
| onVideoStart    | 播放开始       |
| onVideoPause    | 播放暂停       |
| onVideoResume   | 播放恢复       |
| onVideoComplete | 播放完成       |
| onVideoError    | 播放出错       |
| onLikeClick     | 点赞或取消点赞 |

## 资讯接入

开发者需要初始化 AppId 后才能使用相关功能。例如：

```javascript
<NewsPortal
  appId="ba0063bfbc1a5ad878"
  style={{
    width: width,
    height: height,
  }}
  onChange={(params, event) => {
    // 资讯状态
    if (params.type === "onReadingStart") {
      event.showNews({
        // 开始倒计时
        countdownSeconds: 10, // 倒计时长
        scrollEffectSeconds: 3, // 滚动有效时间
      });
    } else if (params.type === "onReward") {
      event.rewardNews({
        // 倒计时结束 发送奖励
        reward: true, // 是否奖励
        rewardData: 5, // 奖励数据 int
      });
    }
  }}
/>
```

---
_Source: https://npm.io/package/react-native-bloom-ad · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._