专为以下场景打造：REACT NATIVE

React Native 视频通话 UI Kit

使用 Tencent RTC 的 React Native 视频通话 UI Kit 连接移动端用户。添加现成的来电和通话中界面，然后配置原生集成及界面语言。

开始构建试用 Call 演示

开发者资源

React Native 视频通话 UI Kit 文档与示例

组件参考

探索 React Native 视频通话 UI Kit 组件。

探索组件用户身份验证

接入指南

安装 React Native 视频通话 UI Kit 并连接用户。

React Native 集成快速入门

示例与源码

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

试用 Call 演示查看 React Native 源代码

React Native 一对一视频通话

在 React Native 应用中融入面对面交流，适用于个人联系或咨询，并在同一体验中提供视频和通话控制。

探索视频咨询

React Native 中的群组视频通话

在 React Native 通话界面中连接多位参与者。按照平台指南配置通话流程和受支持的群组布局。

探索群组通话

REACT NATIVE CALL 功能

React Native 视频通话功能

连接人与人

语音和视频通话
来电处理

掌控通话体验

摄像头和麦克风控件
通话生命周期事件

打造属于您的产品体验

您的应用流程
平台专属集成

探索 React Native 视频通话组件

将 TUICallKit 连接到移动端导航，然后通过应用中的操作发起通话。

通话界面

嵌入您的 React Native 通话界面

将 TUICallKit 挂载到移动端导航中，并使用已验证身份的用户对其进行初始化。该组件提供通话界面和控件。

阅读文档

import { TUICallKit, MediaType } from
  '@tencentcloud/call-uikit-react-native';

await TUICallKit.calls({
  userIdList: [recipientID], mediaType: MediaType.Video,
});

发起通话

在 React Native 中发起视频通话

将应用中的接收方 ID 传递给通话 API。将此操作关联到 React Native 界面中的联系人、对话或通话按钮。

阅读文档

import { TUICallKit, MediaType } from
  '@tencentcloud/call-uikit-react-native';

await TUICallKit.calls({
  userIdList: [recipientID], mediaType: MediaType.Video,
});

语言

将通话界面语言设置为与应用一致。

阅读文档

import { TUICallKit, Language } from
  '@tencentcloud/call-uikit-react-native';

TUICallKit.setLanguage(Language.EN);

个性化定制

自定义 React Native Call UI Kit

根据你的产品调整 React Native 通话界面、控件和来电流程。

语言

为您的 React Native 应用选择受支持的界面语言。

阅读文档

开始使用

为您的 React Native 应用添加视频通话

01
创建您的应用
为应用和测试用户启用 Call。
打开 Call 控制台
02
添加 React Native 视频通话 UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
发起首次通话
登录两位测试用户，然后拨打并接听通话。
配置身份验证

React Native Call UI Kit

npm install @tencentcloud/call-uikit-react-native

import { TUICallKit } from
  '@tencentcloud/call-uikit-react-native';

await TUICallKit.login({
  sdkAppId: SDKAppID, userId: userID, userSig,
});

React Native 视频通话 UI Kit 常见问题

React Native Video Calling UI Kit 包含哪些内容？

React Native Video Calling UI Kit 提供 TUICallKit 界面和通话控件。将其接入您的用户身份体系和移动端导航；Call 服务负责连接参与者。

我应该使用 React Native 通话 SDK 还是 UI Kit？

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

React Native 视频通话 SDK

接听来电需要什么？

用户必须完成身份验证，并且已启用 Call 服务。原生后台和离线行为还需要按照文档完成推送配置。

阅读平台指南

如何对 React Native 视频通话 UI Kit 的用户进行身份验证？

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

阅读身份验证指南

React Native Video Calling UI Kit 是否可免费使用？

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

查看 Call 定价

如何将 React Native 视频通话 UI Kit 集成到 React Native 项目中？

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

阅读平台指南

发布应用前如何测试 React Native 视频通话 UI Kit？

在独立用户之间测试邀请、接听、拒绝和结束通话状态，包括拒绝权限的情况。

阅读平台指南

如何定制 React Native 视频通话 UI Kit 的界面？

通过原生 UI Kit 提供的方法调整通话呈现方式。例如，从 @tencentcloud/call-uikit-react-native 导入 Language，然后调用 TUICallKit.setLanguage(Language.EN)。setCallingBell 用于更改来电铃声，enableMuteMode(true) 则可将其静音。React Web 的 CSS 和 provider props 无法配置这一原生界面；仍需保留 Android 和 iOS 权限设置，并根据 React Native 指南核对各方法。

查看定制指南

React Native Call 集成支持

集成问题

获取 React Native 视频通话 UI Kit 的配置帮助。

查看开发者文档

讨论您的应用

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

联系销售人员

为 React Native 应用引入视频通话

从 React Native Video Calling UI Kit 开始，连接两名测试用户并完成首次通话。

免费开始查看 UI Kit 指南

React Native 视频通话 UI Kit

React Native 视频通话 UI Kit 文档与示例

组件参考

接入指南

示例与源码

React Native 一对一视频通话

React Native 中的群组视频通话

React Native 视频通话功能

连接人与人

掌控通话体验

打造属于您的产品体验

探索 React Native 视频通话组件

嵌入您的 React Native 通话界面

在 React Native 中发起视频通话

语言

自定义 React Native Call UI Kit

语言

铃声与身份信息

为您的 React Native 应用添加视频通话

创建您的应用

添加 React Native 视频通话 UI Kit

发起首次通话

React Native 视频通话 UI Kit 常见问题

React Native Video Calling UI Kit 包含哪些内容？

我应该使用 React Native 通话 SDK 还是 UI Kit？

接听来电需要什么？

如何对 React Native 视频通话 UI Kit 的用户进行身份验证？

React Native Video Calling UI Kit 是否可免费使用？

如何将 React Native 视频通话 UI Kit 集成到 React Native 项目中？

发布应用前如何测试 React Native 视频通话 UI Kit？

如何定制 React Native 视频通话 UI Kit 的界面？

React Native Call 集成支持

集成问题

讨论您的应用

为 React Native 应用引入视频通话