动态与公告

产品动态

公告

产品简介

产品概述

基本概念

应用场景

功能介绍

账号系统

用户资料与关系链

消息管理

群组相关

公众号系统

音视频通话 Call

使用限制

购买指南

计费概述

价格说明

购买指引

续费指引

停服说明

退费说明

开发指引

Demo 专区

开通服务

体验 Demo

快速跑通

下载中心

SDK & Demo 源码

更新日志

聊天互动（含 UI）

TUIKit 组件介绍

快速开始

全功能接入

单功能接入

AI 集成

构建基础界面

更多特性

定义外观

国际化界面语言

推送服务（Push）

服务概述

名词解释

开通服务

快速跑通

厂商通道

数据统计

排查工具

客户端 API

服务端 API

推送回调

高级功能

更新日志

错误码

常见问题

智能客服

功能概述

快速入门

集成指引

管理员操作手册

客服操作手册

更多实践

直播间搭建

AI 聊天机器人方案

超大娱乐协作社群

Discord 实现指南

游戏内集成 Chat 指南

类 WhatsApp Channel 搭建方案

发送红包

Chat 应对防火墙限制相关

无 UI 集成

快速开始

集成 SDK

初始化

登录登出

消息相关

会话相关

群组相关

社群话题

用户管理

离线推送

云端搜索

本地搜索

公众号

客户端 API

JavaScript

Android

iOS & macOS

Swift

Flutter

Electron

Unity

React Native

C 接口

C++

服务端 API

生成 UserSig

REST API

第三方回调

控制台指南

新版控制台介绍

创建并升级应用

基本配置

功能配置

账号管理

群组管理

公众号管理

回调配置

用量统计

资源包查看指南

实时监控

开发辅助工具

访问管理

高级功能

常见问题

uni-app 常见问题

购买相关问题

SDK 相关问题

账号鉴权相关问题

用户资料与关系链相关问题

消息相关问题

群组相关问题

直播群相关问题

昵称头像相关问题

协议与认证

服务等级协议

安全合规认证

IM 政策

隐私政策

数据隐私和安全协议

平滑迁移方案

平滑迁移完整版

平滑迁移简化版

错误码

联系我们

React Native

PDF

Focus Mode

Font Size

Last updated: 2026-03-03 11:29:20

chat-uikit-react-native 是一款基于腾讯云 Chat SDK 的 React Native UI 组件库，提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。基于 React Native 开发的 UIKit 界面风格更契合境外客户的使用习惯，而且支持国际化，如果您的业务有出海的需求，欢迎接入。具体可参见 开源代码。
chat-uikit-react-native  界面效果如下图所示：
﻿
﻿
﻿
前提条件
开通服务
1. 登录 即时通信 Chat 控制台，在应用管理页面，单击创建新应用。如果您已有应用，可省略创建应用过程。
﻿
2. 在应用管理页面的 SDKAppID 列获取 SDKAppID 和 SDKSecretKey。
﻿
注意：
查看密钥信息需要验证身份。
密钥信息为敏感信息，为防止他人盗用，请妥善保管，谨防泄露。
3. ﻿进入用户管理页面，创建 2～3 个测试账号，用于体验单聊能力和群聊能力。
﻿
4. userSig 信息，可单击 即时通信 Chat 控制台 > 开发工具 > UserSig 工具，填写创建的 userID，即可生成 userSig。
注意：
本文提到的生成 UserSig 的方案是在客户端代码中配置 SECRETKEY，该方法中 SECRETKEY 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通 Demo 和功能调试。
正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向 App 的接口，在需要 UserSig 时由您的 App 向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。
环境要求
React Native 0.75.0
﻿Node.js version 18+
JDK 17
Xcode 版本 14.0 或更高版本
Android Studio
配置开发环境
如果您是首次开发 React Native 项目，请参见 React Native 官网步骤 set-up-your-environment 配置开发环境。
在创建项目或编译项目过程中如果遇到环境问题，可以运行 npx react-native doctor 进行环境诊断。
获取 Demo
git clone https://github.com/TencentCloud/chat-demo-react-native
cd chat-demo-react-native/Demo
使用 npm 安装：
npm i --legacy-peer-deps
配置 Demo
说明：
为尊重表情设计版权，Chat Demo/TUIKit 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。下图所示默认的小黄脸表情包版权归腾讯云所有，您可以通过升级至 Chat 专业版 Plus 和企业版 免费使用该表情包。
﻿
﻿
﻿
1. 打开 Demo 项目， ./debug 目录下的 GenerateTestUserSig.js 文件。
2. 在GenerateTestUserSig.js文件中设置 SDKAPPID 和 SECRETKEY ，其值可以在 Chat Console 中获取。 点击目标应用卡片，进入其配置页面。
const SDKAppID = 0; // number
const SECRETKEY = 'xxx'; // string
const APPKey = 'xxx'; // string 离线推送专用 可不填
运行 Demo
编译运行项目时您需要使用真机或模拟器，推荐使用真机运行。您可以参见 React Native 官网 running-on-device 连接真机进行调试。
Android
iOS
1. 手机开启开发者模式，打开 USB 调试开关。
2. 用 USB 连接手机，推荐选择 传输文件 选项，不要选择 仅充电 选项。
3. 确认手机连接成功后，执行 npm run android 编译运行项目。
npm run android
1. 用 USB 连接手机，用 Xcode 打开工程的 ios 目录。
2. 按照 React Native 官网 running-on-device 配置签名信息。
3. 进入 ios 目录安装依赖。
cd ios
pod install
4. 回退到根目录，执行 npm run ios 编译运行项目。
cd ../
npm run ios
发送您的第一条消息
1. 项目启动之后单击左上角发起会话。
2. 进入发起会话窗口。在搜索栏输入 步骤2 中创建的 userID（test_2），选中后打开会话。
3. 在输入框中输入消息并点击发送。
﻿
常见问题
1. 运行 npm run android 提示如图所示错误时，请在项目根目录下重新设置环境变量。
﻿
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
2. 在 Xcode 中执行 Build 命令时如果提示 node 环境变量问题，请进行如下操作：
﻿
cd ios
echo export NODE_BINARY=$(command -v node) > .xcode.env
联系我们
加入 Telegram 技术交流群组 或 WhatsApp 交流群，享有专业工程师的支持，解决您的难题。
参考信息
相关文档
﻿chat-uikit-react-native npm﻿
﻿UIKit 快速集成文档﻿
﻿chat-uikit-engine API 手册﻿
﻿chat-uikit-engine npm﻿
﻿