# @100mslive/roomkit-react 中文文档

规范地址：https://npmcn.com/package/%40100mslive/roomkit-react/

版本：0\.6\.3
npm 元数据更新时间：2026-09-30T17:36:56.547Z
中文译文更新时间：2026-11-05T20:24:12.303Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40100mslive/roomkit-react
原文对照：https://npmcn.com/package/%40100mslive/roomkit-react/?lang=original
项目主页：https://github.com/100mslive/web-sdks#readme
源码仓库：https://github.com/100mslive/web-sdks

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

- 包体积（解压后）：14.3 MB，326 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：41 个
- peer 依赖：react \>=17\.0\.2 \<19\.0\.0
- 首次发布：2023-07-25T12:13:00.931Z
- 最新版本发布：2026-09-30T17:36:56.199Z
- 近 30 天下载量：29168（2026-10-04 至 2026-11-02，npm 官方下载统计）
- 已发布版本数：475（近 12 个月 80 个）

## 中文简介

![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png)

## 安装

```sh
npm install @100mslive/roomkit-react
```

也可以使用：`pnpm add @100mslive/roomkit-react`、`yarn add @100mslive/roomkit-react`、`bun add @100mslive/roomkit-react`

## README

![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png)

[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml) [![Bundle Size](https://badgen.net/bundlephobia/minzip/@100mslive/roomkit-react)](https://bundlephobia.com/result?p=@100mslive/roomkit-react) [![License](https://img.shields.io/npm/l/@100mslive/roomkit-react)](https://www.100ms.live/) ![Tree shaking](https://badgen.net/bundlephobia/tree-shaking/@100mslive/roomkit-react)

# 室内反应库

100ms Room Kit 提供了简单易用UI组件在您的应用程序中构建Live Streaming & Video Conferencing 体验的简单 & 方便.

## 安装

```bash
// npm
npm install @100mslive/roomkit-react@latest --save

// yarn
yarn add @100mslive/roomkit-react@latest
```

## 使用量

### 使用房间代码

```jsx
import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default App() {
    return (
        <HMSPrebuilt roomCode={<room-code>} />
    );
}
```

### 使用认证脚本

```jsx
import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default App() {
    return (
        <HMSPrebuilt authToken={<auth-token>} />
    );
}
```

关于其他道具,请参考 [文档](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart#props-for-hmsprebuilt)

## 自定义

当我们提议 [无代码自定义预建](https://www.100ms.live/docs/get-started/v2/get-started/prebuilt/overview#customize-prebuilt),您可以叉出您的预建组件副本,并修改代码,以便进行更多的微调.

预建自定义可用于 [100毫分高压板](https://dashboard.100ms.live/)。 。 。 .

### 理解结构

这个 `src` 文件夹包含所有组件, `Button`, (中文(简体) ), `Accordion` 包括:. 这个 `Prebuilt` 文件夹包含完整的预建执行 . `App.tsx` 是一个包含 `HMSPrebuilt` 组件.

### 预建中的主要组件

| 构成部分 | 说明 |
| --- | --- |
| [拉尤特房间](https://npmcn.com/package/%40100mslive/roomkit-react/src/Prebuilt/provider/roomLayoutProvider/index.tsx) | 这是包含来自仪表板的配置的背景 [自定义](https://dashboard.100ms.live/)。无论对仪表板自定义器作何种修改,在下次加入时都可以使用. |
| [附录](https://npmcn.com/package/%40100mslive/roomkit-react/src/Prebuilt/AppStateContext.tsx) | 包含在不同屏幕之间切换的逻辑,例如预览到会议,会议到离开。 这些过渡是基于反应商店提供的室状态(`useHMSStore(selectHMSRoomState)`) (中文(简体) ). |
| [预览屏幕](https://npmcn.com/package/%40100mslive/roomkit-react/src/Prebuilt/components/Preview/PreviewScreen.tsx) | 包含预览执行。 包含视频平板、视频、音频切换和虚拟背景及设置以及名称输入. |
| [会议](https://npmcn.com/package/%40100mslive/roomkit-react/src/Prebuilt/components/ConferenceScreen.tsx) | 此选项包含完成预览并进入会话后屏幕 。 这包含了头和脚以及主要内容. |
| [视频结构部分](https://npmcn.com/package/%40100mslive/roomkit-react/src/Prebuilt/layouts/VideoStreamingSection.tsx) | 此组件包含主要视频渲染组件和一个侧边栏( Chat 和 Polls 等交互功能在此显示) |
| [离开史克林](https://npmcn.com/package/%40100mslive/roomkit-react/src/Prebuilt/components/LeaveScreen.tsx) | 这是您离开会议时显示的屏幕 |

### 自定义样式

[基础配置](https://npmcn.com/package/%40100mslive/roomkit-react/src/Theme/base.config.ts) 拥有您可以使用的所有变量。 主题的任何更改都可以在此进行. 除非您想要引入新的变量, 很可能不需要额外的修改 .

何时 [`HMSThemeProvider`](https://npmcn.com/package/%40100mslive/roomkit-react/src/Theme/ThemeProvider.tsx) 在顶层使用,所有变量将提供给此组件树下的所有儿童.

对于使用基元件创建的组件,例如 `Box`, (中文(简体) ), `Flex`, (中文(简体) ), `Button` 等,css Prop可供修改样式. 在css道具内,您可以访问来自 [基础配置](https://npmcn.com/package/%40100mslive/roomkit-react/src/Theme/base.config.ts)。 。 。 .

## 捐款

-   确定您创建的任何新组件/文件 `Typescript`。 。 。 .
    
-   别忘了为按钮,菜单等可操作性设备添加数据测试ID.
    
-   设置适当的工具( E)[ESLint 语录](https://eslint.org/) 财务报告和审定财务报表 [高级](https://prettier.io/)在你的编辑.
    
-   `yarn lint` 将会在您推动更改前运行, 所以每次推出失败时, 请检查是否有提示错误 .
    

读这个 [医生](https://npmcn.com/package/DEVELOPER.MD) 用于编码指南.

## 社区与支持

-   [GitHub 问题](https://github.com/100mslive/web-sdks/issues) - 使用Web SDK提交任何错误.
-   [盘子](https://dashboard.100ms.live/dashboard) - 问问题从百米队获得帮助.
-   [联系人](https://www.100ms.live/contact) ——联系百米团队,获取定价信息,了解我们如何帮助您上线,或者更多地了解平台.

## 常见问题

### 如何安装 @100mslive/roomkit-react？

在项目目录运行 npm install @100mslive/roomkit-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=17\.0\.2 \<19\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @100mslive/roomkit-react 支持 TypeScript 吗？

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

### @100mslive/roomkit-react 支持 ESM 还是 CommonJS？

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

### @100mslive/roomkit-react 可以商用吗？

@100mslive/roomkit-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @100mslive/roomkit-react 的下载量有多少？

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

### @100mslive/roomkit-react 还在维护吗？

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