运营平台使用指南
  • 产品简介
  • 快速上手 - App
  • 快速上手 - Web
  • 快速上手 - H5
  • 快速上手 - 小程序
  • 开发者文档
    • Webhook 通道对接
    • SDK集成
      • SDK更新日志
      • iOS SDK
        • iOS SDK 概述
        • 弹窗 SDK(iOS)
        • 推送 SDK(iOS)
        • 资源位 SDK(iOS)
        • 集成后调试指南
        • 常见问题
        • iOS 推送证书设置指南
        • iOS推送1.3.2及以前推送版本升级指导
        • iOS SDK 1.1.2及以下旧版本升级指导
      • Android SDK
        • 弹窗 SDK (Android)
        • 推送 SDK(Android)
        • 资源位 SDK(Android)
      • Flutter SDK
        • 弹窗 SDK(Flutter)
      • RN SDK
        • 弹窗 SDK( RN)
      • 小程序SDK
        • 弹窗SDK(微信小程序)
        • 资源位SDK(微信小程序)
        • 调试指南(小程序)
        • 小程序获取设备访问ID
        • 弹窗SDK(支付宝小程序)
        • 小程序集成常见问题
      • Web弹窗SDK
      • H5弹窗SDK
    • 厂商通道
      • 华为推送通道集成指南
      • 小米推送通道集成指南
      • 魅族推送通道集成指南
      • vivo推送通道集成指南
      • OPPO推送通道集成指南
    • API参考
      • 弹窗API
      • 推送API
  • 产品使用文档
    • 权限配置
    • 弹窗
      • 创建弹窗
      • 弹窗数据
      • 弹窗管理
      • A/B测试
    • 资源位
      • 创建资源位
      • 轮播图设置
      • 资源位数据
    • 推送
      • 概述
      • 推送准备
      • 创建推送
      • 推送数据
    • 短信
      • 阿里云短信
      • 云片短信
      • 创蓝短信
    • Webhook
    • 用户分层
    • 流程画布
      • 流程画布核心功能
      • ABtest
  • FAQ
    • 弹窗 FAQ
    • 推送(Push) FAQ
    • 术语解释
Powered by GitBook
On this page
  • 参考Demo
  • 环境配置
  • 添加依赖
  • 引入到文件
  • API说明

Was this helpful?

  1. 开发者文档
  2. SDK集成
  3. RN SDK

弹窗 SDK( RN)

在集成无埋点RN SDK的基础上,可额外集成弹窗RN SDK

PreviousRN SDKNext小程序SDK

Last updated 5 years ago

Was this helpful?

参考Demo

Demo里有本文档提到的api示例与混合开发的代码示例,建议您运行并体验。

环境配置

请确保已经添加埋点SDK、触达原生端SDK,如果没有,请依次移步至集成文档,,

添加依赖

$ npm install react-native-growing-touch --save

自动安装 (React Native 0.6.0版本及其以上可以跳过该步骤)

$ react-native link react-native-growing-touch

手动安装

iOS

  1. 打开Xcode,在您的工程目录中点击 Libraries ➜ Add Files to [your project's name]

  2. 选择添加 node_modules ➜ react-native-growing-touch ➜ RNGrowingTouch.xcodeproj

  3. 选择您的目标项目, Build Phases ➜ Link Binary With Libraries添加 libRNGrowingTouch.a

  4. 运行项目 (Cmd+R)<

Android

  1. 打开您的首页Activity android/app/src/main/java/[...]/MainActivity.java

    • 导入包文件 import com.growingio.android.sdk.gtouch.rn.RNGrowingTouchPackage;

    • 在getPackages() 方法中添加 new RNGrowingTouchPackage()

  2. 引入Android Native工程 android/settings.gradle:

       include ':react-native-growing-touch'
       project(':react-native-growing-touch').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-growing-touch/android')
  3. 在app中添加Android Native依赖 android/app/build.gradle:

       compile project(':react-native-growing-touch')

引入到文件

import GrowingTouch from 'react-native-growing-touch';

// TODO: What to do with the module? 
GrowingTouch;

API说明

1 设置弹窗开关

1.1 GrowingTouch.setEventPopupEnable(enable)

设置弹窗的开关,可以在初始化的时候选择关闭弹窗功能,这样弹窗SDK就不会在APP的logo页和闪屏页显示弹窗,然后在APP的内容页打开时再打开弹窗开关。

1.2 参数说明

参数名

类型

必填

默认值

说明

enable

boolean

是

true

开关触达弹窗功能,true开启,false关闭

1.3 代码示例

GrowingTouch.setEventPopupEnable(true)

2 获取弹窗开关状态

2.1 GrowingTouch.isEventPopupEnabled()

获取弹窗开关状态。

2.2 代码示例

let enable = await GrowingTouch.isEventPopupEnabled();

3 打开弹窗并触发"打开APP"事件

3.1 GrowingTouch.enableEventPopupAndGenerateAppOpenEvent()

打开弹窗并触发"打开APP"事件。

应用场景时:担心弹窗SDK在APP启动的Logo页或者闪屏页显示弹窗,这时可以选择在初始化时关闭弹窗开关,然后在APP的内容页打开时再打开弹窗开关。

如果只是单纯调用GrowingTouch.setEventPopupEnable(true)只会打开弹窗开关,并不会触发"打开APP"的弹窗事件。调用该API则会打开弹窗的同时触发一个"打开APP"的弹窗事件。("打开APP" 对应的是触发时机选择“打开App时”)。

3.2 代码示例

let enable = await GrowingTouch.isEventPopupEnabled();
if (!enable) {
  GrowingTouch.enableEventPopupAndGenerateAppOpenEvent();
}

4 弹窗是否正在显示

4.1 GrowingTouch.isEventPopupShowing()

弹窗是否正在显示

4.2 代码示例

let showing = await GrowingTouch.isEventPopupShowing();

5 弹窗的事件监听

5.1 GrowingTouch.setEventPopupListener(listener)

通过监听获取事件和参数,您可以根据事件和参数以及您的业务场景执行相关的交互。

5.2 代码示例

GrowingTouch.setEventPopupListener({
    /**
     * 弹窗显示成功
     *
     * @param eventId   埋点事件名称
     * @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
     */
    onLoadSuccess: (eventId, eventType) => {
      console.log('RNApp onLoadSuccess: eventId = ' + eventId + ', eventType = ' + eventType);
    },

    /**
     * 弹窗加载失败
     *
     * @param eventId     埋点事件名称
     * @param eventType   事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
     * @param errorCode   错误码
     * @param description 错误描述
     */
    onLoadFailed: (eventId, eventType, errorCode, description) => {
      console.log('RNApp onLoadFailed: eventId = ' + eventId + ', eventType = ' + eventType + ', errorCode = ' + errorCode + ', description = ' + description);
    },

    /**
     * 用户点击了弹窗的有效内容。弹窗SDK现在只提供跳转APP内部界面和H5界面两种处理方式。
     * 您可以在这里接管跳转事件,处理需要跳转的url。您也可以自定义Url协议,实现更多业务和交互功能。
     *
     * @param eventId   埋点事件名称
     * @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
     * @param openUrl   跳转的url
     */
    onClicked: (eventId, eventType, openUrl) => {
      console.log('RNApp onClicked: eventId = ' + eventId + ', eventType = ' + eventType + ', openUrl = ' + openUrl);
    },

    /**
     * 用户关闭了弹窗
     *
     * @param eventId   埋点事件名称
     * @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
     */
    onCancel: (eventId, eventType) => {
      console.log('RNApp onCancel: eventId = ' + eventId + ', eventType = ' + eventType);
    },

    /**
     * 弹窗显示超时
     *
     * @param eventId   埋点事件名称
     * @param eventType 事件类型,system(弹窗SDK内置的事件)或custom(用户自定义的埋点事件)
     */
    onTimeout: (eventId, eventType) => {
      console.log('RNApp onTimeout: eventId = ' + eventId + ', eventType = ' + eventType);
    },
  });
https://github.com/growingio/react-native-growing-touch-demo.git
React Native埋点SDK
弹窗原生端SDK集成文档(Android)
弹窗原生端SDK集成文档(iOS)