npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-growing-touch

v1.0.0

Published

Growing Touch for React Native

Downloads

10

Readme

react-native-growing-touch

环境配置

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

添加依赖

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

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

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

手动安装

iOS

  1. 打开Xcode,在您的工程目录中点击 LibrariesAdd Files to [your project's name]
  2. 选择添加 node_modulesreact-native-growing-touchRNGrowingTouch.xcodeproj
  3. 选择您的目标项目, Build PhasesLink 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()
  1. 引入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')
  2. 在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);
    },
  });