# @datadog/mobile-react-native-babel-plugin 中文文档

规范地址：https://npmcn.com/package/%40datadog/mobile-react-native-babel-plugin/

版本：3\.11\.0
npm 元数据更新时间：2026-10-20T14:51:20.741Z
中文译文更新时间：2026-11-11T13:28:01.187Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40datadog/mobile-react-native-babel-plugin
原文对照：https://npmcn.com/package/%40datadog/mobile-react-native-babel-plugin/?lang=original
项目主页：https://github.com/DataDog/dd-sdk-reactnative#readme
源码仓库：https://github.com/DataDog/dd-sdk-reactnative

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：779 kB，192 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：10 个
- peer 依赖：react \>=16\.13\.1，react-native \>=0\.63\.4 \<1\.0
- 首次发布：2025-07-31T16:31:24.304Z
- 最新版本发布：2026-10-20T14:51:20.267Z
- 近 30 天下载量：421106（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：41（近 12 个月 32 个）

## 中文简介

一个 Babel 插件,通过用上下文元数据自动丰富回放组件来增强 Datadog 的回放原生SDK .

## 安装

```sh
npm install @datadog/mobile-react-native-babel-plugin
```

也可以使用：`pnpm add @datadog/mobile-react-native-babel-plugin`、`yarn add @datadog/mobile-react-native-babel-plugin`、`bun add @datadog/mobile-react-native-babel-plugin`

## README

# 原生反应的 Babel 插件

这个 `@datadog/mobile-react-native-babel-plugin` 通过使用上下文元数据自动丰富React组件来增强Datadog React Native SDK. 这有助于提高RUM Action跟踪和会话重放等特性的准确性.

## 设置

**说明**:确定你已经整合了 [数据犬反应原生 SDK](https://www.npmjs.com/package/@datadog/mobile-react-native)。 。 。 .

要安装国家预防机制,运行:

```sh
npm install @datadog/mobile-react-native-babel-plugin
```

要安装 Yarn, 请运行 :

```sh
yarn add @datadog/mobile-react-native-babel-plugin
```

## 配置贝贝

在 Babel 配置中添加插件 。 根据你的设置,你可能使用 `babel.config.js`, (中文(简体) ), `.babelrc`或类似.

**示例配置 :**

```js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['@datadog/mobile-react-native-babel-plugin'] // <-- Add here
};
```

### 配置选项

您可以配置插件来调整其处理您的代码的方式, 赋予您对其行为的控制, 并允许您根据您的项目需求来调整它 .

#### 顶级选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `actionNameAttribute` | 字符串 | – 说吧 – | 用于动作名称的所选属性名称 . |
| `sessionReplay` | 对象 | – 说吧 – | 会话重放配置 . |
| `components` | 对象 | – 说吧 – | 组件跟踪配置. |

* * *

#### `sessionReplay` 选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `svgTracking` | 布尔 | 虚假 | 在会话重放时是否跟踪 SVG 资产 . |

* * *

#### `components` 选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `useContent` | 布尔 | 真实 | 是否使用组件内容(例如:子,道具)作为动作名. |
| `useNamePrefix` | 布尔 | 真实 | 是否使用组件名前缀动作 . |
| `tracked` | 数组 | – 说吧 – | 特定组件跟踪配置列表. |

* * *

#### `components.tracked[]` (每个构成部分)

表格中的每个条目 `tracked` 阵列是一个对象,形状如下:

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `name` | 字符串 | – 说吧 – | 要跟踪的组件名称( 例如 ), `Button`) (中文(简体) ). |
| `useContent` | 布尔 | 从全局继承 | 覆盖 `useContent` 用于本构成部分. |
| `useNamePrefix` | 布尔 | 从全局继承 | 覆盖 `useNamePrefix` 用于本构成部分. |
| `contentProp` | 字符串 | – 说吧 – | 用于内容而不是子的属性名( 例如 : `"subTitle"`) (中文(简体) ). |
| `handlers` | 数组 | – 说吧 – | 要跟踪的事件/动作对列表 . |

* * *

#### `components.tracked[].handlers[]`

| 外地 | 类型 | 说明 |
| --- | --- | --- |
| `event` | 字符串 | 要截取的事件名称( 例如 : `"onPress"`) (中文(简体) ). |
| `action` | 字符串 | RUM 动作名称与此事件关联 . _(仅限 `"TAP"` 正在支持动作)_ |

* * *

**示例配置( E)_使用配置选项_:**

```js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    [
      '@datadog/mobile-react-native-babel-plugin',
      {
        actionNameAttribute: 'custom-prop-value',
        sessionReplay: {
          svgTracking: true
        },
        components: {
          useContent: true,
          useNamePrefix: true,
          tracked: [
            {
              name: 'CustomButton',
              contentProp: 'text'
              handlers: [{event: 'onPress', action: 'TAP'}],
            },
            {
              name: 'CustomTextInput',
              handlers: [{event: 'onFocus', action: 'TAP'}],
            },
            {
              useNamePrefix: false,
              useContent: false,
              name: 'Tab',
              handlers: [{event: 'onChange', action: 'TAP'}],
            },
          ],
        },
      },
    ],
  ],
};
```

## 解决问题

**说明**: 如果您在旧的 React Industrial 版本上, 在您的工程中使用 Typescription, 您可能需要安装预设 `@babel/preset-typescript`。 。 。 .

要安装国家预防机制,运行:

```sh
npm install @babel/preset-typescript
```

要安装 Yarn, 请运行 :

```sh
yarn add @babel/preset-typescript 
```

然后更新您的 Babel 配置文件, 如使用以下示例 :

```js
module.exports = {
  presets: [
    'module:@react-native/babel-preset',
    '@babel/preset-typescript' // <-- Add here
  ],
  plugins: ['@datadog/mobile-react-native-babel-plugin']
};
```

## 常见问题

### @datadog/mobile-react-native-babel-plugin 是什么？

一个 Babel 插件,通过用上下文元数据自动丰富回放组件来增强 Datadog 的回放原生SDK \.

### 如何安装 @datadog/mobile-react-native-babel-plugin？

在项目目录运行 npm install @datadog/mobile-react-native-babel-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.13\.1）、react-native（\>=0\.63\.4 \<1\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。它还提供命令行工具 datadog-generate-sr-assets，可以用 npx datadog-generate-sr-assets 直接运行。

### @datadog/mobile-react-native-babel-plugin 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @datadog/mobile-react-native-babel-plugin 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @datadog/mobile-react-native-babel-plugin 可以商用吗？

@datadog/mobile-react-native-babel-plugin 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @datadog/mobile-react-native-babel-plugin 的下载量有多少？

根据 npm 官方下载统计，@datadog/mobile-react-native-babel-plugin 在 2026/10/12 – 2026/11/10 这 30 天内被下载 421,106 次，日均约 14,037 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @datadog/mobile-react-native-babel-plugin 还在维护吗？

最新版本 3\.11\.0 发布于 2026/10/20（21 天前）；至今共发布 41 个版本，其中过去 12 个月发布了 32 个；首次发布于 2025/08/01。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。