专为以下场景打造：REACT NATIVE

React Native 直播 SDK

使用 Tencent RTC 的 React Native 直播 SDK 构建移动端直播。将原生视频视图和房间状态与 React Native 界面及平台配置相结合。

开始构建探索 Live 演示

开发者资源

React Native 直播 SDK 文档与示例

API 参考

探索 React Native 直播 SDK API。

探索 API 用户身份验证

接入指南

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

React Native 集成快速入门

示例与源码

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

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

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

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

探索直播购物

使用 React Native 观看直播活动

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

探索活动直播

REACT NATIVE LIVE 功能

React Native 直播功能

开始直播

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

让人们相聚

直播视频播放
观众参与

打造属于您的产品体验

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

探索 React Native 直播 API

将 AtomicXCore 视频视图和房间状态连接到您的 React Native 主持人及观众界面。

视频画布

添加 React Native 直播视频视图

将 AtomicXCore 视频视图放入您的 React Native 布局。将其绑定到直播间状态，同时由您的应用提供周边控件和导航。

阅读文档

import { LiveCoreView } from
  'react-native-tuikit-atomic-x/lib/module/components/LiveCoreView';

<LiveCoreView
  liveId={liveID}
  coreViewType="pushView"
  style={{ flex: 1 }}
/>

开始直播

在 React Native 中开始直播

验证主播身份，准备本地音视频，并创建直播房间。媒体视图和房间生命周期应使用同一个房间 ID。

阅读文档

const { createLive } = useLiveListState();

createLive({
  liveInfo: {
    liveID, liveName: 'Studio sessions',
    seatLayoutTemplateID: 600, keepOwnerOnSeat: true,
  },
  onSuccess: handleStarted, onError: handleError,
});

加入房间

让观众身临其境

使用相同的房间 ID 连接观众。

阅读文档

const { joinLive } = useLiveListState();

joinLive({
  liveID,
  onSuccess: handleJoined, onError: handleError,
});

个性化定制

自定义 React Native 直播界面

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

您的布局

围绕核心视频画布和房间状态构建界面。

阅读文档

开始使用

在 React Native 应用中添加直播

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

React Native Live SDK

npx expo install react-native-tuikit-atomic-x \
  expo-dev-client expo-build-properties

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

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

React Native 直播 SDK 常见问题

React Native 直播 SDK 是否包含视频视图？

React Native Live Streaming SDK 包含 AtomicXCore 视频视图和房间状态 API。您的应用需围绕这些视图提供主播端和观众端界面；如需开箱即用的界面，请选择 TUILiveKit。

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

使用 SDK API 构建自定义界面。如果需要现成的页面和控件，请选择 UI Kit。

React Native 直播 UI Kit

我可以在 Expo Go 中运行 SDK 吗？

该 SDK 包含原生模块。请使用原生开发构建（例如 Expo development client），并按照指南完成 iOS 和 Android 配置。

如何对 React Native Live Streaming SDK 的用户进行身份验证？

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

阅读身份验证指南

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

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

查看 Live 定价

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

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

阅读平台指南

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

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

阅读平台指南

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

使用支持的主播与观众 API 构建自己的界面。电商、票务或播放权限流程由应用负责。

阅读平台指南

React Native Live 集成支持

集成问题

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

查看开发者文档

讨论您的应用

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

联系销售人员

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

使用 React Native 直播 SDK 及其平台指南连接创作者与观众。

免费开始查看 SDK 指南

React Native 直播 SDK

React Native 直播 SDK 文档与示例

API 参考

接入指南

示例与源码

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

使用 React Native 观看直播活动

React Native 直播功能

开始直播

让人们相聚

打造属于您的产品体验

探索 React Native 直播 API

添加 React Native 直播视频视图

在 React Native 中开始直播

让观众身临其境

自定义 React Native 直播界面

您的布局

观众互动

在 React Native 应用中添加直播

创建您的应用

添加 React Native 直播 SDK

连接到您的第一个房间

React Native 直播 SDK 常见问题

React Native 直播 SDK 是否包含视频视图？

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

我可以在 Expo Go 中运行 SDK 吗？

如何对 React Native Live Streaming SDK 的用户进行身份验证？

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

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

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

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

React Native Live 集成支持

集成问题

讨论您的应用

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