专为以下场景打造：REACT NATIVE

React Native
Chat UI Kit

使用 Tencent RTC React Native Chat UI Kit 添加移动端对话。将已连接的会话列表、消息和输入组件集成到 iOS 和 Android 应用中。

开始构建试用 Chat Demo

开发者资源

React Native Chat UI Kit 文档与示例

组件参考

探索 React Native Chat UI Kit 组件。

探索组件用户身份验证

接入指南

安装 React Native Chat UI Kit 并发送一条测试消息。

React Native 集成快速入门

示例与源码

探索消息体验和官方开发者资源。

试用 Chat Demo 查看 React Native 源代码

应用内的会面空间

通过熟悉的移动端会话凝聚您的社区。

探索社区聊天

在会话中显示

在移动聊天流程中为照片和附件留出空间。

阅读集成指南

REACT NATIVE 聊天功能

核心功能，随时可接入

会话列表

最近对话
未读消息指示器

消息界面

联动式消息视图
集成式消息编辑器

媒体分享

照片和附件
原生媒体权限

人员与群组

单聊对话
群组互动

打造属于您的产品体验

调整 UI 源代码
适配您的导航

互联组件

底层 Chat SDK
您的应用身份

探索 React Native Chat Components

了解各组件如何协同工作。

对话

触手可及的每一次对话

从已连接的会话列表开始，并根据需要调整其预览。

阅读文档

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

消息

让对话自然展开

为所选会话添加消息列表。

阅读文档

import { MessageList } from
  '@tencentcloud/chat-uikit-react-native';

<MessageList conversationID={conversationID} />

消息编辑器

让回复更轻松

将输入框连接到与消息列表相同的会话。

阅读文档

import { MessageInput } from
  '@tencentcloud/chat-uikit-react-native';

<MessageInput conversationID={conversationID} />

个性化定制

自定义您的 React Native 聊天界面

将您的视觉风格和应用流程融入聊天体验。

打造专属界面

调整组件样式和预览渲染器，以适配您的移动端品牌风格。

阅读文档

开始使用

你的第一次对话从这里开始

01
创建您的应用
设置 Chat 应用和测试用户。
打开 Chat 控制台
02
添加 React Native Chat UI Kit
按照平台指南连接您的项目。
按照集成指南操作
03
连接你的用户
登录两个测试用户并发送第一条消息。
连接您的用户

React Native Chat UI Kit

npm install @tencentcloud/chat-uikit-react-native tuikit-atomicx-react-native

import { ConversationList } from
  '@tencentcloud/chat-uikit-react-native';

export function Conversations() {
  return <ConversationList />;
}

React Native Chat UI Kit 常见问题

我可以在 Expo Go 中使用这些组件吗？

原生依赖项需要原生构建。按照当前指南使用 Expo 开发构建或 React Native 工作流，安装对等依赖项并配置媒体权限。组件摘录假定登录和原生设置均已完成。

阅读集成指南

React Native UI Kit 与 SDK 有何不同？

UI Kit 在消息 SDK 之上提供相互联动的界面组件。如果希望完全自行构建界面，请使用 Core SDK。

探索 Core SDK

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

在后端生成生产环境 UserSig。将其传递给客户端用于身份验证，并将应用密钥保留在服务器上。

阅读身份验证指南

这些 React Native 代码片段能否构成一个完整的应用？

这些内容展示的是各个集成步骤。请按照完整指南完成导入、初始化、登录、错误处理和目标平台专属配置。发布前，请使用不同账户测试消息功能。

查看完整教程

React Native Chat UI Kit 的使用量如何计费？

托管 Chat 服务的用量取决于您选择的套餐。请查看适用于您应用的内含功能和额度；可选插件和 Call 服务可能有单独的要求。

查看 Chat 定价

如何将 React Native 聊天 UI Kit 集成到 React Native 项目中？

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

阅读平台指南

发布应用前如何测试 React Native 聊天 UI Kit？

检查登录、SDK 就绪、发送与接收事件，以及重连后的消息状态。

阅读平台指南

如何定制 React Native 聊天 UI Kit 的界面？

需要页面级修改时，可将 UI Kit 的页面源码复制到应用中。例如，调整 ChatScreen 和本地堆栈路由，从现有客户资料页打开会话。官方示例使用 @react-navigation/native；替换它时，还需更新复制页面中的导航调用。保留 SafeAreaProvider 和 ToastRoot，并在 Android、iOS 两端测试自定义流程。

查看定制指南

获取后续步骤所需的支持

集成问题

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

查看开发者文档

讨论您的应用

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

联系销售人员

构建你的下一次对话体验

使用 React Native Chat UI Kit 构建你的 app。

免费开始查看 UI Kit 指南

React Native Chat UI Kit

React Native Chat UI Kit 文档与示例

组件参考

接入指南

示例与源码

应用内的会面空间

在会话中显示

核心功能，随时可接入

会话列表

消息界面

媒体分享

人员与群组

打造属于您的产品体验

互联组件

探索 React Native Chat Components

触手可及的每一次对话

让对话自然展开

让回复更轻松

自定义您的 React Native 聊天界面

打造专属界面

契合人们的连接方式

你的第一次对话从这里开始

创建您的应用

添加 React Native Chat UI Kit

连接你的用户

React Native Chat UI Kit 常见问题

我可以在 Expo Go 中使用这些组件吗？

React Native UI Kit 与 SDK 有何不同？

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

这些 React Native 代码片段能否构成一个完整的应用？

React Native Chat UI Kit 的使用量如何计费？

如何将 React Native 聊天 UI Kit 集成到 React Native 项目中？

发布应用前如何测试 React Native 聊天 UI Kit？

如何定制 React Native 聊天 UI Kit 的界面？

获取后续步骤所需的支持

集成问题

讨论您的应用

构建你的下一次对话体验

React Native
Chat UI Kit