教你轻松在React Native中集成统计（umeng）的功能(最新版)

下面是我的完整集成过程（主要参考为umeng官方文档）

第一步，在android/app/build.gradle中添加如下代码(这里使用的基础组件为2.0.0和统计组件8.0.0，如果低于这个版本，会略有不同，这里不做解释)

dependencies {
    ........
    implementation 'com.umeng.umsdk:common:2.0.0' //基础组件
    implementation 'com.umeng.umsdk:utdid:1.1.5.3'
    implementation 'com.umeng.umsdk:analytics:8.0.0' //统计
    implementation 'com.umeng.umsdk:push:5.0.2' //推送
    ........
}

第二步，在android/app/src/main/AndroidManifest.xml中添加权限

<manifest……>
<uses-sdk android:minSdkVersion="8">uses-sdk>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<application ……>
……
<activity ……/>
<meta-data android:value="YOUR_APP_KEY" android:name="你的APPKEY"/>
<meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>
application>    
manifest>

第三步，在android/app/src/main/java/com/你的项目名/MainActivity.java中添加以下代码

//引入资源包
import com.umeng.analytics.MobclickAgent;
import com.umeng.commonsdk.UMConfigure;

//重写onCreate方法
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // 注意：如果您已经在AndroidManifest.xml中配置过appkey和channel值，可以调用此版本初始化函数。
        UMConfigure.init(this, "你的appkay", "Umeng", UMConfigure.DEVICE_TYPE_PHONE, null);
        // interval: 单位是毫秒，默认Session间隔时间是30秒
        MobclickAgent.setSessionContinueMillis(30000);
        MobclickAgent.setPageCollectionMode(MobclickAgent.PageMode.LEGACY_MANUAL);
        UMConfigure.setProcessEvent(true);
    }

//增加以下代码
public void onResume() {
      super.onResume();
      MobclickAgent.onResume(this);
    }
    public void onPause() {
      super.onPause();
      MobclickAgent.onPause(this);
    }

第四步，下载umeng提供modules

下载一下三个文件：下载地址（https://github.com/umeng/React_Native_Compent/tree/master/android/app/src/main/java/com/umeng/soexample/invokenative）
AnalyticsModule.java //统计包
DplusReactPackage.java // 桥接文件
RNUMConfigure.java  //相关配置
其他文件说明（这里暂时不下载）
PushModule.java //消息推送
ShareModule.java //第三方分享

第五步，导入资源包

1.在android/app/src/main/java/com/你的项目名，新建目录invokenative
2.将之前下载的三个文件放入该目录下
3.修改三个java文件的package的路径，例如

 

第六步，修改之前下载的文件的package路径，将其修改为你的工程路径。这里以我的路径为例

原本的package路径
package com.umeng.soexample.invokenative;
修改后的package路径
package com.github_rn.invokenative;

（AnalyticsModule.java、DplusReactPackage.java，RNUMConfigure.java）三个文件全部要依次修改（代码位于文件的最顶端）

 

第七步，在android/app/src/main/java/com/你的项目名/MainApplication.java中添加以下代码

//导入我们第五六步修改好的资源包
import com.github_rn.invokenative.DplusReactPackage;


@Override
    protected List getPackages() {
      return Arrays.asList(
          new MainReactPackage(),
            new DplusReactPackage() // 实例化一下
      );
    }

 

第八步，导出react-native原生模块（这里我们可以直接使用umeng提供的文件直接在你的项目中使用，地址https://github.com/umeng/React_Native_Compent/blob/master/native/AnalyticsUtil.js）

var { NativeModules } = require('react-native');
module.exports = NativeModules.UMAnalyticsModule;

 

第九步，maven依赖配置（自动集成，手动集成需要在android/app下新建libs，拷贝官方的jar进去）

allprojects {
    repositories {
        mavenLocal()
        google()
        jcenter()
        maven { url 'https://dl.bintray.com/umsdk/release' } // 新添加这一行
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

 

第十步，使用

....
import AnalyticsUtil from '../util/AnalyticsUtil';
....
AnalyticsUtil.onEvent('SearchClick');
.......

 

 

最后到这里关于umeng统计的全部代码已经集成完毕，

转载请说明出处，略略略.......