# @cloudflare/realtimekit-react-native-ui 中文文档

规范地址：https://npmcn.com/package/%40cloudflare/realtimekit-react-native-ui/

版本：2\.0\.0
npm 元数据更新时间：2026-09-03T14:21:38.790Z
中文译文更新时间：2026-11-10T03:10:38.273Z
软件包许可：未声明

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

原始 npm 页面：https://www.npmjs.com/package/%40cloudflare/realtimekit-react-native-ui
原文对照：https://npmcn.com/package/%40cloudflare/realtimekit-react-native-ui/?lang=original
项目主页：https://realtime.cloudflare.com/

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

- 包体积（解压后）：3.2 MB，900 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：7 个
- peer 依赖：react \*，react-native \*，react-native-fs \*，react-native-svg \*，react-native-webview \*，react-native-file-viewer \*，react-native-sound-player \*，@react-native-documents/picker \*，react-native-safe-area-context \*，@cloudflare/react-native-webrtc \*，@cloudflare/realtimekit-react-native \>=2\.0\.0
- 首次发布：2025-06-04T16:23:18.699Z
- 最新版本发布：2026-07-09T12:57:43.248Z
- 近 30 天下载量：23450（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：53（近 12 个月 20 个）

## 中文简介

云浮实时 Kit 用于会议组件的 UI 库

## 安装

```sh
npm install @cloudflare/realtimekit-react-native-ui
```

也可以使用：`pnpm add @cloudflare/realtimekit-react-native-ui`、`yarn add @cloudflare/realtimekit-react-native-ui`、`bun add @cloudflare/realtimekit-react-native-ui`

## README

[![Logo](https://cf-assets.www.cloudflare.com/slt3lc6tev37/6EYsdkdfBcHtgPmgp3YtkD/0b203affd2053988264b9253b13de6b3/logo-thumbnail.png)](https://cloudflare.com/)

## 实时 Kit React 本地用户界面

创建实时通信应用程序的一套 React Endern UI 组件  
[**探索文件“**](https://docs.realtime.cloudflare.com/react-native)  
  
• 妇女 [报告错误](https://community.cloudflare.com/) • 妇女 [请求特性](https://community.cloudflare.com/)

## 目录

-   [开始](https://npmcn.com/package/%40cloudflare/realtimekit-react-native-ui/#readme-getting-started)
-   [使用量](https://npmcn.com/package/%40cloudflare/realtimekit-react-native-ui/#readme-usage)
-   [关于](https://npmcn.com/package/%40cloudflare/realtimekit-react-native-ui/#readme-about)

## 开始

首先,你需要安装 [@cloudflare/ realtimekit-resact-native-ui (英语)](https://www.npmjs.com/package/@cloudflare/realtimekit-react-native-ui) 与《京都议定书》 [@ cloudflare/ realtimekit- react-native (英语)](https://www.npmjs.com/package/@cloudflare/realtimekit-react-native) 软件包 :

```sh
npm i @cloudflare/realtimekit-react-native-ui @cloudflare/realtimekit-react-native
```

这个 `@cloudflare/realtimekit-react-native` 软件包是一个软件包,它通过与我们的服务器交互处理会议所需的所有低等逻辑。 使用它创建会话对象,您可以将它传递给UI Kit组件.

安装所需的设备 **本地语言** 依赖关系

```bash
npm install @cloudflare/react-native-webrtc @react-native-documents/picker react-native-file-viewer react-native-fs react-native-sound-player react-native-webview
```

安装这些 **所需经费** 根据您 `react-native` 版本

-   `react-native-safe-area-context`
    
    -   **反应-内在反应(qq 0.74/0.84.1+建议)** 数字 :
        
        ```bash
        npm install react-native-safe-area-context@^5.0.0
        ```
        
-   `react-native-svg`
    
    -   跟着 [安装指令](https://github.com/react-native-svg/react-native-svg#installation) 用于反应-内生-svg.
    -   ```bash
        npm install react-native-svg@<compatible-version>
        ```
        

## 使用量

这是你们需要执行的一系列步骤:

-   设置 `RealtimeKitProvider`这提供了向所有儿童提供聚会对象和其他数据的背景.
-   设置 `RtkUIProvider`这为儿童部件提供了设计系统.
-   初始化实时Kit客户端 。 使用 `useRealtimeKitClient()` 钩子和 `initMeeting` 以初始化客户端.
-   将会议对象传递给UI Kit,它将用来取回会议信息并在用户界面上显示.

```jsx
import React, { useEffect } from 'react';
import { RealtimeKitProvider, useRealtimeKitClient } from '@cloudflare/realtimekit-react-native';
import { RtkUIProvider, RtkMeeting, RtkWaitingScreen } from '@cloudflare/realtimekit-react-native-ui';

export default function App() {
  const [meeting, initMeeting] = useRealtimeKitClient();

  useEffect(() => {
    const init = async () => {
      initMeeting({
        authToken: '<auth-token>',
        defaults: {
          audio: true,
          video: true,
        },
      });
    };
    init();
  }, []);

  return (
    <RealtimeKitProvider value={meeting}>
      <RtkUIProvider>
        { !meeting ? 
          <RtkWaitingScreen /> : 
          <RtkMeeting meeting={meeting} showSetupScreen={true} iOSScreenshareEnabled={true} />
        }
      </RtkUIProvider>
    </RealtimeKitProvider>
  );
}
```

_欲了解更多实例,请参见: [文档](https://docs.realtime.cloudflare.com/react-native)_

## 关于

`@cloudflare/realtimekit-react-native-ui` 由Cloudflare公司创建和维护.

Cloudflare的名字和标志是Cloudflare股份有限公司的商标.

## 常见问题

### @cloudflare/realtimekit-react-native-ui 是什么？

云浮实时 Kit 用于会议组件的 UI 库

### 如何安装 @cloudflare/realtimekit-react-native-ui？

在项目目录运行 npm install @cloudflare/realtimekit-react-native-ui，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、react-native-fs（\*）、react-native-svg（\*）、react-native-webview（\*）、react-native-file-viewer（\*）、react-native-sound-player（\*）、@react-native-documents/picker（\*）、react-native-safe-area-context（\*）、@cloudflare/react-native-webrtc（\*）、@cloudflare/realtimekit-react-native（\>=2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @cloudflare/realtimekit-react-native-ui 支持 TypeScript 吗？

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

### @cloudflare/realtimekit-react-native-ui 支持 ESM 还是 CommonJS？

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

### @cloudflare/realtimekit-react-native-ui 可以商用吗？

@cloudflare/realtimekit-react-native-ui 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @cloudflare/realtimekit-react-native-ui 的下载量有多少？

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

### @cloudflare/realtimekit-react-native-ui 还在维护吗？

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