React Native 的友盟集成

前言

最近从iOS开发转到RN开发, 碰到许多坑, 想记录下来巩固学习. 希望本文能帮到你~~

免费获得:

SDK下载及文档
安卓集成指南
iOS集成指南

SDK下载及文档

SDK地址: 官方下载 (记得关VPN访问友盟官网哟~)
文档地址: 偷看一下

安卓集成指南

未接触过安卓开发的, 看到文档的时候一定头很大. 没事我来带大家一步一步趟过去.

1.检查SDK文件

我们SDK下载下来后看到的文件夹, 包括Android和ReactNative部分.Android里放的是jar文件, ReactNative里放的是java文件. 参考如下:

图1

图2

2.放jar文件

这个最简单! 放进工程目录的libs文件夹下, 搞定~ 路径如下:

图3

2-1添加依赖

我们先到android/app/build.gradle

图4

找到dependencies, 添加架包(有两种方式,自己搭配啦~):

1.通用:

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')

2.每个都添加一次:

dependencies {
    compile files('libs/umeng-analytics-7.5.3.jar')
    compile files('libs/umeng-common-1.5.3.jar')

2-2查看权限配置

到android/app/src/main/AndroidMainifest.xml

图5

配置好权限, 当然你可以参考官方demo, 选择其他权限获取更精准的数据啦~

3. 放java文件

文档没写路径, 只写了文件引用. 超超找了路径给你们~ 如下:

图6

这里不要直接抄demo, 要放在包名路径下.
比如你的包名是com.umeng, 那么可以在java/com/umeng/里建个'invokenative'放java文件, 如下:

图7

剩下的就是根据警告, 修正引用路径~

4.引用问题

如果之前没开发安卓的经验, 这里要注意'引用路径'的问题:
所有demo中引用的路径一定不能照抄demo的如:
import com.umeng.soexample.invokenative.RNUMConfigure;
如果你的路径是com/umeng/invokenative, 那要改成:
import com.umeng.invokenative.RNUMConfigure;

5.初始化

5-1MainActivity中初始化

代码如下:

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //ShareModule.initSocialSDK(this);
        //PushModule.initPushSDK(this);
        MobclickAgent.setSessionContinueMillis(1000);
        MobclickAgent.setScenarioType(this, EScenarioType.E_DUM_NORMAL);
        MobclickAgent.openActivityDurationTrack(false);
        //PushAgent.getInstance(this).onAppStart();
    }


    @Override
    public void onResume() {
        super.onResume();
        MobclickAgent.onResume(this);
    }
    @Override
    protected void onPause() {
        super.onPause();
        MobclickAgent.onPause(this);
    }

5-2MainApplication中初始化

代码如下:

 @Override
        protected List getPackages() {
            return Arrays.asList(
                new MainReactPackage(),
                new DplusReactPackage()
            );
        }
    };


    @Override
    public void onCreate() {
        super.onCreate();
        SoLoader.init(this, /* native exopackage */ false);
        UMConfigure.setLogEnabled(true);
        //初始化组件化基础库, 统计SDK/推送SDK/分享SDK都必须调用此初始化接口
        RNUMConfigure.init(this, "59892f08310c9307b60023d0", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,
            "669c30a9584623e70e8cd01b0381dcb4");
        //initUpush();

    }

注意:未集成推送功能, secret参数可以传空字符串"".

iOS集成指南:

跟安卓一样, iOS有单独的文件夹, 放着对应的framework, 我们只要打开工程, 学着demo做:

1.引用framework和桥接文件

找到framework如下:

图8
找到2个必要的桥接文件

图9

图10

为了以后统一管理, 把framework放到UMComponents文件夹里, 把桥接文件放到文件夹UMReactBridge文件夹.
再把这两个文件夹用鼠标拖到工程中. 如下图:

图11

接下来按照demo里初始化代码如下:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [UMConfigure setLogEnabled:NO];
  [RNUMConfigure initWithAppkey:@"我的appkey" channel:@"App Store"];
  
  [MobClick setScenarioType:E_UM_NORMAL];
  [MobClick setCrashReportEnabled:YES];

到这里iOS友盟就集成完毕了~~

2.魔性BUG

注意: demo写了 [UMessage addLaunchMessage]; 记得删掉哦! 不然app会有魔性的启动屏哦~ 感兴趣的小伙伴可以自己玩玩看~
到此, 友盟的集成完毕!
如果小伙伴们有埋点的需求的可以参考文章:React Native 友盟统计--打点/埋点