React Native

Baixar

Modo Foco

Tamanho da Fonte

Última atualização: 2026-08-26 16:57:56

TUIKit 是一款基于腾讯云 Chat SDK 的 React Native UI 组件库，提供了一些通用的 UI 组件，包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件，您可以快速构建优雅的、可靠的、可扩展的 Chat 应用。基于 React Native 开发的 UIKit 界面风格更契合境外客户的使用习惯，而且支持国际化，如果您的业务有出海的需求，欢迎接入。具体可参见 开源代码。
TUIKit 界面效果如下图所示：
﻿
前提条件
开通服务
步骤1：创建 IM 应用
登录 即时通信 Chat 控制台，单击创建新应用。如果您已有应用，可省略创建应用过程。
﻿
在创建弹窗中输入应用名称并选择 Chat，选择合适的部署区域，单击创建。
﻿
步骤2：获取 SDKAppID 与密钥
在 Chat 概览 获取 SDKAppID 和 SDKSecretKey。
注意：
查看密钥信息需要验证身份。
密钥信息为敏感信息，为防止他人盗用，请妥善保管，谨防泄露。
﻿
步骤3：创建测试账号
进入 Chat > 账号管理，创建 2～3 个测试账号，用于体验单聊能力和群聊能力。
﻿
环境要求
React Native 版本： ≥  0.85.3
﻿Node.js 版本： ≥  22
iOS 版本：≥  iOS 16.0
Android 版本：≥  24
配置开发环境
如果您是首次开发 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
在 src/screens/LoginScreen.tsx 文件中设置 SDKAPPID 和 SECRETKEY。
const SDKAppID = 0; // number
const SecretKey = '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
发送您的第一条消息
登录应用：在登录页输入 前提条件 > 开通服务 > 步骤3：创建测试账号 中创建的测试账号，登录后选择聊天场景。
添加好友：点击通讯录，在添加好友搜索框中输入另一个测试账号的 userID，在 前提条件 > 开通服务 > 步骤3：创建测试账号 搜索并完成添加。
开启会话：点击好友信息进入好友详情，点击发送消息即可进入聊天界面，发送您的第一条消息。
﻿
常见问题
运行 npm run android 提示如图所示错误时，请在项目根目录下重新设置环境变量。
﻿
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
在 Xcode 中执行 Build 命令时如果提示 node 环境变量问题，请进行如下操作：
﻿
cd ios
echo export NODE_BINARY=$(command -v node) > .xcode.env