教你輕松在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<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');
.......

 

 

最后到這里關於umeng統計的全部代碼已經集成完畢，

轉載請說明出處，略略略.......