跑通示例项目
大约 2 分钟
跑通示例项目
环信提供一个开源的聊天示例项目,演示了如何使用该 UIKit 快速搭建聊天页面,实现完整业务。
本文展示如何编译并运行 React Native 平台的聊天 UIKit 示例项目。
前提条件
开始前,确保你的开发环境满足如下条件:
- MacOS 12 或以上版本;
- React Native 0.71 或以上版本;
- NodeJs 16.18 或以上版本;
- 对于
iOS
平台,需要Xcode
工具,版本建议 14 或以上; - 对于
Android
平台,需要Android studio
工具,版本建议 2022 或以上。
AppServer
该实例项目运行需要配置 AppServer。在服务端部署 AppServer 服务,在客户端实现 RESTful API 接口。
本示例项目中,配置服务器地址 RestApi.setServer
, 提供获取手机号验证码、手机号登录、上传头像、获取 rtcToken、获取 rtcMap、获取群主头像接口。
详见 example/src/demo/common/rest.api.ts
。
操作步骤
下载项目
可以通过 GitHub 地址下载项目。
初始化项目
下载完成之后,打开文件目录。运行以下命令初始化项目:
yarn && yarn uikit-prepack
- 对于 iOS 平台,运行
pod install
初始化原生部分的依赖配置。
cd example/ios && pod install
- 对于 Android 平台,建议使用 Android studio sync 示例项目。
使用 Android studio
应用打开 example/android
目录,同步项目。
本地配置
登录环信即时通讯控制台,获取 App Key。将 App Key、用户 ID 和用户 token 填入 example
的配置文件 example/src/env.ts
中。
例如:
export const useSendBox = false;
export const isDevMode = true;
export const appKey = "xxx";
export const accountType = "easemob"; // agora or easemob
export const agoraAppId = "xxx";
export const fcmSenderId = "xxx";
export const account = [{ id: "xxx", token: "xxx" }];
手动设置区域,目前支持国内和海外。配置文件在 packages/react-native-chat-uikit/src/config.local.ts
export const language = "zh-Hans"; // 'en' or 'zh-Hans'
export const release_area = "china"; // 'china' or 'global'
编译和运行
在 debug 模式下,运行本地服务,在调试过程中可以修改 JavaScript 文件,查看修改后的效果。
yarn run ios
或者
yarn run android
可能出现的问题
- Q:Android 平台应用编译失败,可能的原因是什么?
A: 可能需要 Android Studio
工具的 cmake 3.10.2
插件。