# ReactNative SDK

## 集成RN模块

### 1、安装SDK RN模块

通过npm集成SDK RN模块

```
npm install react-native-analysys
```

### 2、链接SDK RN模块

{% hint style="info" %}
React Native 0.60 及以上版本会 autolinking，不需要执行下边的 react-native link 命令。
{% endhint %}

```
react-native link react-native-analysys
```

### 3、配置 package.json

在 React Native 项目里的 package.json 文件的 script 模块里增加如下配置

```
"scripts": {
      "postinstall": "node node_modules/react-native-analysys/ansHook.js -run"
}
```

### 4、执行 npm  命令 <a href="#id.reactnativev1.15-zhi-hang-npm-ming-ling" id="id.reactnativev1.15-zhi-hang-npm-ming-ling"></a>

```
npm install
```

## 集成Android端

### 1、集成sdk，版本要求4.5.7及以上，参考官方文档<https://docs.analysys.cn/integration/sdk/android>

### 集成React Native支持模块：

```
// 方舟sdk
implementation('cn.com.analysys:analysys-arkanalysys:4.5.7')
// React Native支持模块
implementation('cn.com.analysys:analysys-react-native:4.5.7')
```

### 2、设置接口相关Module

```
public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        ...
        @Override
        protected List<ReactPackage> getPackages() {
          List<ReactPackage> packages = new PackageList(this).getPackages();
          packages.add(new RNAnalysysAgentPackage());
          return packages;
        }
        ...
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
}
```

## iOS端

### 集成方舟SDK

React Native 0.60 及以上版本可以通过 CocoaPods 的方式引用 RNAnalysysAgentModule 插件及 易观方舟SDK；React Native 0.60 以下版本需要使用手动方式添加。

#### 方式一：CocoaPods 集成

1. 将`npm install`下载后的文件：项目目录/node\_modules/react-native-analysys文件拷贝至ios工程下（一般为.xcodeproj同级目录），在该目录下创建Podfile文件，并配置RN插件，如下示例：

```
platform :ios, '8.0'
use_frameworks!

target 'YourApp' do
    pod 'RNAnalysysAgentModule', :path => 'react-native-analysys/'
end
```

1. 关闭Xcode，在工程目录下执行`pod install`或`pod install --verbose --no-repo-update`，完成后打开xxx.xcworkspace工程

#### 方式二：手动引入

1. 下载[方舟SDK](https://github.com/analysys/ans-ios-sdk/releases)并导入iOS工程中
2. 将`npm install`下载后的`RNAnalysysAgentModule`插件（路径：项目目录/node\_modules/react-native-analysys\_test/sdk/ios）导入工程
3. 勾选 Copy items if needed、Create groups- Add 完成添加类库
4. 添加依赖库:选择工程 - Targets - “项目名称” - Build Phase - Link Binary With Libraries ：`libz.tbd、libicucore.tbd、libsqlite3.tbd`

### 初始化SDK

在Xcode工程文件`~AppDelegate.m` 中导入头文件`"#import <AnalysysAgent/AnalysysAgent.h>"`，配置 SDK 相关内容。

```
#import <AnalysysAgent/AnalysysAgent.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    //  设置key，77a52s552c892bn442v721为样例数据，请根据实际情况替换相应内容
    //  AnalysysAgent 配置信息
    AnalysysConfig.appKey = @"77a52s552c892bn442v721";
    // 设置渠道
    AnalysysConfig.channel = @"App Store";
    // 设置追踪新用户的首次属性
    AnalysysConfig.autoProfile = YES;
    // 设置上传数据使用AES加密，需添加加密模块
    //  AnalysysConfig.encryptType = AnalysysEncryptAES;
    //  使用配置初始化SDK
    [AnalysysAgent startWithConfig:AnalysysConfig];
    
    #if DEBUG
    [AnalysysAgent setDebugMode:AnalysysDebugButTrack];
#else
    [AnalysysAgent setDebugMode:AnalysysDebugOff];
#endif
    //  设置上报地址
    [AnalysysAgent setUploadURL:@"https://url:port""];
    
    ...
  return YES;
}

@end
```

## React Native 中 JS 使用

在 js 中获取 `RNAnalysysAgentModule` 模块

```
//  易观统计模块
import AnalysysAgent from "react-native-analysys";
```

### 接口调用

在相关需要进行统计的部分进行埋点。以点击购买事件为例：

```
//  事件名称为：buy(购买)  事件附加属性为：ptype(产品分类): iPhone; model(型号): iPhone X
var properties = {
    'ptype': 'iPhone',
    'model': 'Apple iPhoneX'
}
AnalysysAgent.track('buy',properties)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://arkdocs.analysys.cn/integration/sdk/reactnative-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.