大咖说：React Native 全埋点实现原理（内附赠书）

本文主要介绍如何实现 React Native 的全埋点，主要是控件点击 $AppClick 事件。该内容，会默认你有一定的 React Native 开发经验，（若没有，也可参与文末赠书）。

■ 作者 ■

王灼洲 合肥研发中心负责人

《Android 全埋点解决方案》和《iOS 全埋点解决方案》一书作者，有 10+ 年 Android & iOS 相关开发经验，是国内第一批从事 Android 研发工作，开发和维护国内第一个商用的开源 Android & iOS 数据埋点 SDK。

温馨提示：文末附赠书。

一、React Native 简介

React Native 是由 Facebook 推出的移动应用开发框架，可以用来开发 iOS、Android、Web 等跨平台应用程序，官网为：

https://facebook.github.io/react-native/。

React Native 和传统的 Hybrid 应用最大的区别就是它抛开了 WebView 控件。React Native 产出的并不是“网页应用”、“HTML5 应用”或者“混合应用”，而是一个真正的移动应用，从使用感受上和用 Objective-C 或 Java 编写的应用相比几乎是没有区分的。React Native 所使用的基础 UI 组件和原生应用完全一致。我们要做的就是把这些基础组件使用 JavaScript 和 React 的方式组合起来。React Native 是一个非常优秀的跨平台框架。

下面我们先用 React Native 创建一个简单的 Demo。

1.1

创建项目

使用 React Native 开发移动应用， 首先需要安装 React Native 相关的组件。具体的安装方法，可以参照 React Native 官方介绍。

React Native 安装完成之后，就可以使用命令行工具创建新项目了。

react-native init AwesomeProject

上面的命令创建了一个名为 AwesomeProject 的项目，然后就可以通过下面的命令进入 AwesomeProject 文件夹并运行 iOS 程序。

cd AwesomeProjectreact-native run-ios

然后等待一会，iOS 模拟器将会启动，就可以看到如下图 1-1 所示的运行结果。

图 1-1 模拟器

在命令行输入下面的命令，Xcode 将会打开上面创建的 AwesomeProject 项目。

open ./ios/AwesomeProject.xcworkspace

Xcode 中，就可以看到 AwesomeProject 项目相关的代码。首先，需要把 SensorsSDK 项目添加进来。Xcode 中，点击 File → Add Files to "AwesomeProject" ...，会弹出如下图 1-2 所示的对话框，选择 SensorsSDK.xcodeproj 文件，并勾选相应的 Target，最后点击 Add 按钮。

图 1-2 添加项目

然后，还需要添加相应的依赖关系。选中 AwesomeProject 项目，在 General 标签的 Frameworks 栏中点击加号（+）按钮，添加 SensorsSDK.framework。

最后， AppDelegate.m 中引入 SensorsSDK，并在 - application:didFinishLaunchingWithOptions: 方法中调用 SensorsAnalyticsSDK 的 - startWithServerURL: 初始化方法初始化 SDK。

#import <SensorsSDK/SensorsSDK.h>


@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [SensorsAnalyticsSDK startWithServerURL:@"xxxxx"];
  
  ......


  return YES;
}


@end

运行 AwesomeProject 项目，我们就可以在 Xcode 控制台中看到 $AppStart 事件信息。

{
  "properties": {
    "$model": "x86_64",
    "$manufacturer": "Apple",
    "$lib_version": "1.0.0",
    "$os": "iOS",
    "$app_version": "1.0",
    "$os_version": "12.3",
    "$lib": "iOS"
  },
  "event": "$AppStart",
  "time": 1576141146301,
  "distinct_id": "D13CE550-1EE4-45B4-AB83-CDF7601C9C77"
}

按 Home 键或上滑 HomeBar 让应用程序进入后台，将会在 Xcode 控制台中看到 $AppEnd 事件。

{
  "properties": {
    "$model": "x86_64",
    "$manufacturer": "Apple",
    "$lib_version": "1.0.0",
    "$os": "iOS",
    "$event_duration": 434917.40625,
    "$app_version": "1.0",
    "$os_version": "12.3",
    "$lib": "iOS"
  },
  "event": "$AppEnd",
  "time": 1576141581203,
  "distinct_id": "D13CE550-1EE4-45B4-AB83-CDF7601C9C77"
}

从而也可以说明，对于 React Native 项目的 $AppStart 和 $AppEnd 事件，我们无需做任何特殊处理，即可直接支持。

其实在控制台中也会打印页面浏览（$AppViewScreen）事件，但是这个事件在严格意义上来说不应该属于 ReactNative 应用程序的页面浏览事件，这个只是应用程序中的 UIWindow 控件的根视图控制器的页面浏览事件。而实际上在 React Native 中，是使用 react-navigation 进行页面间的跳转。对于 iOS 来说，跳转的新页面并不是一个视图控制器，而是弹出一个视图，因此并不能采集到正确的页面浏览事件。

1.2

基础控件

React Native 支持的控件有很多，详细可以参照 React Native 官网的相关介绍和说明：

https://facebook.github.io/react-native/docs/activityindicator。

下面我们以 React Native 的 Switch 控件为例来做介绍。

可以通过修改 AwesomeProject 项目中的 App.js 文件，在页面中添加一个 Switch 组件。

import React, { Component } from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Switch,
  StatusBar,
} from 'react-native';


import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';


export default class App extends Component {
  state = {
    value: false,
  }
  render() {
    return (
      <>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
          <ScrollView
            c