Chat
专为以下场景打造:REACT NATIVE
React Native
Chat SDK
使用 Tencent RTC React Native Chat SDK 构建移动消息功能。在 iOS 和 Android 之间共享聊天逻辑,同时保留您自己的界面和原生交互。
开发者资源
React Native Chat SDK 文档与示例
REACT NATIVE 聊天功能
为您的产品构建消息通信基础
单聊对话
- 一对一消息
- 您自己的界面
群组消息
- 共享会话
- 成员管理 API
富消息
- 文本与媒体
- 自定义应用内容
会话状态
- 历史记录和未读数量
- 您的应用存储
用户身份
- 您自己的用户 ID
- UserSig 身份验证
应用集成
- React Native APIs
- 平台特定的生命周期
探索 React Native Chat APIs
从连接您的应用所需的 API 开始。
连接
一个消息层,两个平台
在连接用户之前,请先注册上传和网络插件。
阅读文档chat.ts
import TencentCloudChat from '@tencentcloud/chat';
import NetInfo from '@react-native-community/netinfo';
import TIMUploadPlugin from 'tim-upload-plugin';
const chat = TencentCloudChat.create({ SDKAppID });
chat.registerPlugin({ 'chat-network-monitor': NetInfo });
chat.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });消息
让对话持续推进
登录并收到 SDK_READY 后发送一条直接文本消息。
阅读文档send-message.ts
const message = chat.createTextMessage({
to: recipientID,
conversationType: TencentCloudChat.TYPES.CONV_C2C,
payload: { text: 'See you there!' },
});
await chat.sendMessage(message);事件
让新消息自动进入视野
在消息到达时更新应用状态。
阅读文档events.ts
chat.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessages);
// Dispose your listener when the subscription ends.
chat.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, onMessages);开始使用
你的第一次对话从这里开始
- 01
- 02
- 03
React Native Chat SDK
终端
npm install @tencentcloud/chat tim-upload-plugin @react-native-community/netinfochat.ts
import TencentCloudChat from '@tencentcloud/chat';
import NetInfo from '@react-native-community/netinfo';
import TIMUploadPlugin from 'tim-upload-plugin';
const chat = TencentCloudChat.create({ SDKAppID });
chat.registerPlugin({ 'chat-network-monitor': NetInfo });
chat.registerPlugin({ 'tim-upload-plugin': TIMUploadPlugin });React Native Chat SDK 常见问题
SDK 是否会处理原生平台设置?
消息层可以共享,但原生模块、媒体权限、推送配置和设备构建仍需针对各平台进行设置。请按照 React Native SDK 指南使用受支持的软件包组合。
React Native Chat SDK 是否包含开箱即用的 UI?
SDK 提供消息 API 和事件。聊天界面由你的应用构建。插图展示了可能的应用体验。
如何对 React Native Chat SDK 的用户进行身份验证?
在后端生成生产环境 UserSig。将其传递给客户端用于身份验证,并将应用密钥保留在服务器上。
这些 React Native 代码片段能否构成一个完整的应用?
这些内容展示的是各个集成步骤。请按照完整指南完成导入、初始化、登录、错误处理和目标平台专属配置。发布前,请使用不同账户测试消息功能。
React Native Chat SDK 的使用量如何计费?
托管 Chat 服务的用量取决于您选择的套餐。请查看适用于您应用的内含功能和额度;可选插件和 Call 服务可能有单独的要求。
如何将 React Native 聊天 SDK 集成到 React Native 项目中?
安装文档所述的包和原生依赖,然后重新构建原生应用。核验权限、生命周期和原生回调,不应假设运行环境仅包含 JavaScript。
发布应用前如何测试 React Native 聊天 SDK?
检查登录、SDK 就绪、发送与接收事件,以及重连后的消息状态。
如何定制 React Native 聊天 SDK 的界面?
围绕文档中的 SDK 事件构建自己的会话列表、消息渲染和输入编辑器。

