专为以下场景打造：REACT NATIVE

React Native 直播 UI Kit

使用 Tencent RTC 的 React Native Live Streaming UI Kit 添加移动直播功能。将 TUILiveKit 的主持端、观众端和房间列表页面接入应用导航。

开始构建探索 Live 演示

开发者资源

React Native 直播 UI Kit 文档与示例

组件参考

探索 React Native 直播 UI Kit 组件。

探索组件用户身份验证

接入指南

安装 React Native 直播 UI Kit 并连接用户。

React Native 集成快速入门

示例与源码

查看产品的实际运行效果并了解其实现方式。

探索 Live 演示查看 React Native 源代码

使用 React Native 开展直播产品演示

让观众观看创作者的商品演示并参与对话。您的应用负责管理商品目录和购买体验。

探索直播购物

使用 React Native 观看直播活动

将演示内容及其观众带入您的 React Native 应用。将观看界面连接到房间，让用户可以跟进直播活动。

探索活动直播

REACT NATIVE LIVE 功能

React Native 直播功能

开始直播

主播和观众角色
房间生命周期管理

让人们相聚

直播视频播放
观众参与

打造属于您的产品体验

灵活的应用布局
平台专属构建模块

探索 React Native 直播组件

将主播端视图、观众端视图和直播间列表连接到您的应用导航。

主播预览

为创作者提供一个起点

添加 React Native 主播准备页面，让创作者在开播前预览摄像头。将该页面接入已通过身份验证的主播账户。

阅读文档

import { AnchorPage } from 'react-native-tuikit-live';

<AnchorPage onBack={goBack} onEndLive={showLiveSummary} />

观众端视图

将观看体验融入您的应用

使用所选直播房间打开 React Native 观众视图。将进出房间与应用导航相连接。

阅读文档

import { LiveAudiencePage } from 'react-native-tuikit-live';

<LiveAudiencePage
  onBack={goBack}
  onEndLive={showLiveSummary}
/>

直播房间列表

开启直播发现新入口

添加可浏览的列表，并将其连接到观看流程。

阅读文档

import { LiveListPage } from 'react-native-tuikit-live';

<LiveListPage onBack={goBack} />

个性化定制

自定义您的 React Native Live UI Kit

在您的 React Native 应用中，围绕直播体验组织视频、观众互动和导航。

您的视觉品牌形象

使用平台提供的自定义选项调整视觉呈现。

阅读文档

开始使用

在 React Native 应用中添加直播

01
创建您的应用
为应用和测试用户启用 Live。
打开 Live 控制台
02
添加 React Native 直播 UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
连接到您的第一个房间
使用一个账户开播，另一个账户观看。
配置身份验证

React Native Live UI Kit

git clone https://github.com/Tencent-RTC/TUIKit_ReactNative.git

import { useLoginState } from
  'react-native-tuikit-atomic-x';

const { login } = useLoginState();
login({ sdkAppID: SDKAppID, userID, userSig });

React Native 直播 UI Kit 常见问题

我可以使用 React Native Live UI Kit 构建什么？

React Native 直播 UI Kit 包含主播端、观众端和房间列表界面。将这些 TUILiveKit 组件连接到您的用户账号和 React Native 导航，即可打造完整的观看流程。

此 UI Kit 如何与 SDK 配合使用？

UI Kit 在底层服务之上提供界面组件。如果需要更灵活地控制自己的应用界面，请选择 SDK。

React Native 直播 SDK

如何将 React Native 直播观众端接入直播？

启用 Live 服务，验证观众身份并加入主播创建的房间。使用不同账号测试 React Native 观众端界面，并按照平台指南完成配置。

React Native 观众端集成指南

如何对 React Native 直播 UI Kit 的用户进行身份验证？

在您的服务器上创建 UserSig，并在您自己的登录流程完成后将其传递给客户端。应用密钥应始终保存在服务器上。

阅读身份验证指南

React Native 直播 UI Kit 可以免费使用吗？

该界面与托管式 Live 服务承担不同的职责。请为您的应用开通该服务，并查看当前套餐、功能可用性和使用费用。

查看 Live 定价

如何将 React Native 直播 UI Kit 集成到 React Native 项目中？

安装文档所述的包和原生依赖，然后重新构建原生应用。核验权限、生命周期和原生回调，不应假设运行环境仅包含 JavaScript。

阅读平台指南

发布应用前如何测试 React Native 直播 UI Kit？

测试主播与观众角色、支持的推流或播放事件及重连行为。

阅读平台指南

如何定制 React Native 直播 UI Kit 的界面？

自定义复制到本地的 live/src/pages/Anchor/index.tsx 页面及共享的 tuikit-atomic-x 资源。例如，在底部栏添加 Product 操作，并将其 onPress 连接到你自己的商品目录面板。图标位于 tuikit-atomic-x 下的 src/static/images，文案位于 src/locales。修改后需重新构建。该按钮不提供商品目录、结账或支付后端，这些仍由应用自行负责。

查看定制指南

React Native Live 集成支持

集成问题

获取 React Native 直播 UI Kit 的配置帮助。

查看开发者文档

讨论您的应用

讨论您的产品、预期用量和集成需求。

联系销售人员

为您的 React Native 应用加入直播功能

使用 React Native Live Streaming UI Kit 及其平台指南连接创作者与观众。

免费开始查看 UI Kit 指南

React Native 直播 UI Kit

React Native 直播 UI Kit 文档与示例

组件参考

接入指南

示例与源码

使用 React Native 开展直播产品演示

使用 React Native 观看直播活动

React Native 直播功能

开始直播

让人们相聚

打造属于您的产品体验

探索 React Native 直播组件

为创作者提供一个起点

将观看体验融入您的应用

开启直播发现新入口

自定义您的 React Native Live UI Kit

您的视觉品牌形象

评论与内容

在 React Native 应用中添加直播

创建您的应用

添加 React Native 直播 UI Kit

连接到您的第一个房间

React Native 直播 UI Kit 常见问题

我可以使用 React Native Live UI Kit 构建什么？

此 UI Kit 如何与 SDK 配合使用？

如何将 React Native 直播观众端接入直播？

如何对 React Native 直播 UI Kit 的用户进行身份验证？

React Native 直播 UI Kit 可以免费使用吗？

如何将 React Native 直播 UI Kit 集成到 React Native 项目中？

发布应用前如何测试 React Native 直播 UI Kit？

如何定制 React Native 直播 UI Kit 的界面？

React Native Live 集成支持

集成问题

讨论您的应用

为您的 React Native 应用加入直播功能