React Native 轻松集成统计功能（Android 篇）

关于推送的集成请参考这篇文章，本篇文章将引导你集成统计功能，只需要简单的三个步骤就可以集成统计功能。

第一步 安装

在你的项目路径下执行命令：

npm install janalytics-react-native --savenpm install jcore-react-native --savereact-native link

执行完上述命令后，使用 Android Studio 打开你的项目。

第二步 配置：

2.1 配置 settings.gradle

执行完 link 命令后，如果 link 失败，则需要手动打开 settings.gradle 文件，完成以下配置：

your project/settings.gradle

include ':app', 'janalytics-react-native', 'jcore-react-native'project(':janalytics-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/janalytics-react-native/android')project(':jcore-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/jcore-react-native/android')

2.2 配置 build.gradle

your project/android/app/build.gradle

android {  ...  defaultConfig {    applicationId "your application id"    ...    manifestPlaceholders = [      JPUSH_APPKEY: "your app key", //在此替换你的APPKey      JPUSH_CHANNEL: "developer-default",       //应用渠道号, 默认即可    ]  }}...dependencies {  compile project(':janalytics-react-native')  compile project(':jcore-react-native')}

2.3 配置 AndroidManifest.xml

your project/AndroidManifest.xml

<manifest>    <application>        ...        <meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>        <meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>        ...    </application></manifest>...

到此为止配置已经完成了，现在 sync 一下项目即可看到 janalytics 和 jcore 两个库出现在自己的项目下。

第三步 使用

3.1 加入 JAnalyticsPackage：

your project/app/MainApplication.java

...@Overrideprotected List<ReactPackage> getPackages() {        return Arrays.<ReactPackage>asList(                new MainReactPackage(),                new JAnalyticsPackage(SHUTDOWN_TOAST, SHUTDOWN_LOG)        );}

上面的两个参数是 bool 类型的，第一个参数设置为 true 表示关闭 toast 提示，第二个设置为 true 表示关闭日志打印。建议在 debug 版本中打开。
同样在 MainApplication，调用 init 方法：

@Overridepublic void onCreate() {    super.onCreate();    SoLoader.init(this, false);//        在 Init 之前调用，设置为 true，则会打印 debug 级别日志，否则只会打印 warning 级别以上的日志    JAnalyticsInterface.setDebugMode(true);    JAnalyticsInterface.init(this);}

3.2 import JAnalyticsModule

接下来在 JS 文件中只要引入 JAnalyticsModule 就可以调用它的接口了：

your component.js

...import JAnalyticsModule from 'janalytics-react-native';

调用 API

startLogPageView(params)

这个方法表示开始记录页面统计，在生命周期中调用：

componentDidMount() {    var param = {      pageName: "main"    };    JAnalyticsModule.startLogPageView(param);  }

stopLogPageView(params)

这个方法表示结束记录页面统计，在生命周期中调用：

componentWillUnmount() {    var param = {      pageName: "main"    };    JAnalyticsModule.stopLogPageView(param);  }

postEvent(event)

上报统计事件，目前事件分为：CountEvent(计数事件)、CalculateEvent(计算事件)、RegisterEvent(注册事件)、LoginEvent(登录事件)、BrowseEvent(浏览事件)、PurchaseEvent(购买事件)。各事件格式如下：

loginEvent = {     type: 'login',  // 必填     extra: Object,  // 附加键值对，格式 {String: String}     method: String，  // 填自己的登录方法     success: Boolean }registerEvent = {     type: 'register',  // 必填     extra: Object,  // 附加键值对，格式 {String: String}     method: String，  // 填自己的登录方法     success: Boolean }purchaseEvent = {    type: 'purchase', // 必填    extra: Object,  // 附加键值对，格式 {String: String}    goodsType: String,    goodsId: String,    goodsName: String,    success: Boolen,    price: float,    currency: String, // CNY, USD    count: int}browseEvent = {    type: 'browse',    id: String,    extra: Object,  // 附加键值对，格式 {String: String}    name: String,    contentType: String,    duration: float}      countEvent = {     type: 'count',     extra: Object,  // 附加键值对，格式 {String: String}     id: String}     calculateEvent = {     type: 'calculate',     extra: Object,  // 附加键值对，格式 {String: String}     id: String,     value: double}

使用示例：

onLoginPress = () => {    var LoginEvent = {      type: 'login',      extra: {        userId: "user1"      },      method: "login",      success: true    };    JAnalyticsModule.postEvent(LoginEvent);  }

作者：KenChoi
链接：http://www.jianshu.com/p/ddae248498aa
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。