# @datadog/mobile-react-native-webview 中文文档

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

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

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

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

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

- 包体积（解压后）：144 kB，64 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=16\.13\.1，react-native \>=0\.63\.4 \<1\.0，react-native-webview \>=11\.0\.0，@datadog/mobile-react-native ^3\.0\.0
- 首次发布：2023-04-04T08:56:52.146Z
- 最新版本发布：2026-10-20T14:49:19.399Z
- 近 30 天下载量：173120（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：94（近 12 个月 32 个）

## 中文简介

客户端 React 本地模块,用于与反应- 本地- 网络视图和 Datadog 交互

## 安装

```sh
npm install @datadog/mobile-react-native-webview
```

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

## README

# 反应-内在-网络视图的反向监测

## 概览

Real User Monitor(RUM)允许您监视网页浏览并消除混合反应原生应用程序中的盲点.

您可以进行以下活动:

-   跟踪移动应用程序中跨越网络和本地组件的用户行程
-   移动应用程序中网页或本地组件存在延迟的根本原因范围
-   支持在移动设备上装入网页有困难的用户

RUM 支持使用 [反应-本地-网络视图](https://github.com/react-native-webview/react-native-webview)。 。 。 .

## 设置

### 先决条件

将 RUM 浏览器 SDK 设置在您想要在移动 React Natural 应用程序上渲染的网页上 。 更多信息见 [RUM 浏览器监视器](https://docs.datadoghq.com/real_user_monitoring/browser/#npm)。 。 。 .

添加 `react-native-webview` 您的应用程序 [正式安装文件](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md)。 。 。 .

### 输入您的网页视图

导入 `WebView` 从 `@datadog/mobile-react-native-webview` 改为 `react-native-webview`数字 :

```javascript
import { WebView } from '@datadog/mobile-react-native-webview';
// or
import WebView from '@datadog/mobile-react-native-webview';
```

您可以使用全部已有的功能 `react-native-webview` 作为 `WebView` 构成部分从 `@datadog/mobile-react-native-webview` 覆盖 `react-native-webview` 组件.

使用 `allowedHosts` 弹道 `WebView` 组件 :

```javascript
<WebView
    source={{ uri: 'https://www.example.com' }}
    allowedHosts={['example.com']}
/>
```

## 访问您的网页视图

您的网页视图出现在 [RUM 探索器](https://app.datadoghq.com/rum/explorer) 关联 `service` 财务报告和审定财务报表 `source` 属性。 这个 `service` 属性表示网络视图生成的网络组件,以及 `source` 属性表示移动应用程序的平台,如React Native.

过滤您的 React 本地应用程序,然后单击会话 。 出现了一个附有会议活动清单的侧面小组.

igg src=" real user 监测/反应 inative/反应 webview session.png" alt="webview会话实例"

点击 **打开视图瀑布** 从会话到资源瀑布可视化 **业绩** 选项卡.

## 常见问题

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

客户端 React 本地模块,用于与反应- 本地- 网络视图和 Datadog 交互

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

在项目目录运行 npm install @datadog/mobile-react-native-webview，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=16\.13\.1）、react-native（\>=0\.63\.4 \<1\.0）、react-native-webview（\>=11\.0\.0）、@datadog/mobile-react-native（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

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

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

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

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

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

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

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

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

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

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