IDE:Atom 1.33.0 x64
环境:react: 16.8.3、react-native: 0.59.5(通过项目根目录下package.json查看或在项目目录下运行react-native -v查看)、react-native-cli: 2.0.1
测试手机:小米6(安卓版本:8.0.0)
这里只做了Android的集成,IOS的暂时不做。
添加应用、申请appKey:https://mobile.umeng.com/platform/apps/list
查看统计数据(应用列表):https://mobile.umeng.com/platform/apps/list
ReactNative 集成文档:https://developer.umeng.com/docs/66632/detail/67587
官网说明文档看不太懂(可能是文档没更新、版本对不上、没有安卓开发经验),还不如自己试错来得快。
首先下载两个压缩文件:
https://developer.umeng.com/sdk/android
https://developer.umeng.com/sdk/reactnative
我用react-native init生成的项目的android目录下没有libs文件夹,这里可以自己新建一个,默认是会导入这个文件夹下的jar包的,android\app\build.gradle配置了自动导入libs下的jar包。
解压下载的两个压缩文件
将718954472\Android\analytics\analytics_android_8.0.2\umeng-analytics-8.0.2.jar和718954472\Android\common\common_android_2.0.2\normal\umeng-common-2.0.2.jar拷贝到\android\app\libs文件夹。
接下来拷贝桥接文件,原则上只要拷贝到\android\app\src\main\java目录下即可,我这里是:\android\app\src\main\java\com\rango\umeng\invokenative
将364669965\ReactNative\analytics\analytics_reactnative_2.0.0\analytics_android\AnalyticsModule.java和364669965\ReactNative\common\common_reactnative_2.0.0\common_android\DplusReactPackage.java、RNUMConfigure.java拷贝到\android\app\src\main\java\com\rango\umeng\invokenative
最终效果如下:
文件部分到此结束,接下来是文件内容部分。
将AnalyticsModule.java、DplusReactPackage.java、RNUMConfigure.java文件的package com.umeng.soexample.invokenative;改成对应的包名,我这里是package com.rango.umeng.invokenative;
以下跟官网内容差不多:
打开MainApplication文件,添加DplusReactPackage:
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
+ new DplusReactPackage()
);
}
};
并在onCreate()中进行初始化:
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
+ RNUMConfigure.init(this, "59892f08310c9307b60023d0", "Umeng", UMConfigure.DEVICE_TYPE_PHONE, "669c30a9584623e70e8cd01b0381dcb4");
}
RNUMConfture.init接口一共五个参数,其中第一个参数为Context,第二个参数为友盟Appkey,第三个参数为channel,第四个参数为应用类型(手机或平板),第五个参数为push的secret(如果没有使用push,可以为空)。
至此,所有的工程配置已经完成,接下来请按照各个组件的文档进行初始化。
统计部分配置:
初始化
首先需要找到MainActivity的生命周期,添加如下代码:
+ @Override
+ public void onResume() {
+ super.onResume();
+ MobclickAgent.onResume(this);
+ }
+ @Override
+ protected void onPause() {
+ super.onPause();
+ MobclickAgent.onPause(this);
+ }
并在onCreat中设置统计的场景,以及发送间隔:(在MainActivity新建一个onCreate方法?还是在MainApplication的onCreate加?我选择了后者)
MobclickAgent.setSessionContinueMillis(1000*40);
以下是官网没讲的部分(或许讲了我没看到):
MainActivity.java需要添加:
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
+ import com.umeng.analytics.MobclickAgent;
MainApplication.java需要添加:
import com.facebook.soloader.SoLoader;
+ import com.rango.umeng.invokenative.DplusReactPackage;
+ import com.rango.umeng.invokenative.RNUMConfigure;
+ import com.umeng.commonsdk.UMConfigure;
+ import com.umeng.analytics.MobclickAgent;
我这里只需要统计部分,所以DplusReactPackage.java需要去掉:
@Override
public List createNativeModules(
ReactApplicationContext reactContext) {
List modules = new ArrayList<>();
- //modules.add(new ShareModule(reactContext));
- //modules.add(new PushModule(reactContext));
modules.add(new AnalyticsModule(reactContext));
return modules;
}
好了,接下来就可以愉快的查看统计数据了。