即时通信 IM React Native

TUIKit 是一款基于腾讯云 Chat SDK 的 React Native UI 组件库,提供了一些通用的 UI 组件,包含会话、聊天、群组等功能。基于这些精心设计的 UI 组件,可以以快速构建优雅的、可靠的、可扩展的 Chat 应用。基于 React Native 开发的 UIKit 界面风格更契合境外客户的使用习惯,而且支持国际化,如果你的业务有出海的需求,欢迎接入。

相关产品
即时通信 IM 产品页,含版本规格、价格与购买入口。

TUIKit 界面效果如下:

一、步骤1:创建 IM 应用

登录 即时通信 IM 控制台,在应用管理页面,单击创建新应用。如果你已有应用,可省略创建应用过程。

二、步骤2:获取 SDKAppID 与密钥

在应用管理的应用列表中,获取新应用的 SDKAppID 和 SecretKey (密钥) 信息。

三、步骤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; // numberconst SecretKey = 'xxx'; // string

八、运行 Demo

编译运行项目时你需要使用真机或模拟器,推荐使用真机运行。你可以参见 React Native 页面 running-on-device 连接真机进行调试。

AndroidiOS1. 手机开启开发者模式,打开 USB 调试开关。2. 用 USB 连接手机,推荐选择 传输文件 选项,不要选择 仅充电 选项。3. 确认手机连接成功后,执行 npm run android 编译运行项目。npm run android1. 用 USB 连接手机,用 Xcode 打开工程的 ios 目录。2. 按照 React Native 页面 running-on-device 配置签名信息。3. 进入 ios 目录下安装依赖。cd iospod install4. 回退到根目录,执行 npm run ios 编译运行项目。cd ../npm run ios

九、发送你的第一条消息

·登录应用:在登录页输入 前提条件 > 开通服务 > 步骤3:创建测试账号 中创建的测试账号,登录后选择聊天场景。

·添加好友:点击通讯录,在添加好友搜索框中输入另一个测试账号的 userID并完成添加(你在前面步骤 前提条件 > 开通服务 > 步骤3:创建测试账号 中创建的测试账号)。

·开启会话:点击好友信息进入好友详情,点击发送消息即可进入聊天界面,发送你的第一条消息。

十、运行 npm run android 提示如下错误时,请在项目根目录下重新设置环境变量。

export ANDROID_HOME=$HOME/Library/Android/sdkexport PATH=$PATH:$ANDROID_HOME/emulatorexport PATH=$PATH:$ANDROID_HOME/platform-tools

十一、在 Xcode 中执行 Build 命令时如果提示 node 环境变量问题,请进行如下操作:

cd iosecho export NODE_BINARY=$(command -v node) > .xcode.env

赞 (0)
上一篇 4天前
下一篇 4天前