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

时间：2025-05-06 22:36:56

下面是我的完整集成过程（主要参考为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的路径，例如

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





第六步，修改之前下载的文件的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<ReactPackage> getPackages() {

      return Arrays.<ReactPackage>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');

.......




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


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


转载请说明出处，略略略.......
相关文章