【全攻略】React Native与环信UIKit：Expo项目从创建到云打包完整指南

前言

在当今快速发展的移动应用领域，React Native 因其跨平台开发能力和高效的开发周期而受到开发者的青睐。而 Expo，作为一个基于 React Native 的框架，进一步简化了开发流程，提供了一套完整的工具链，使得开发者能够快速启动和运行项目。本次，我们将探讨如何在 Expo 项目中集成环信的 React Native UIKit，这是一个专为即时通讯应用设计的 UI 组件库，能够帮助开发者快速构建出美观且功能完备的聊天界面。

在本篇文章中，我们将一步步指导您从创建一个新的 Expo 项目开始，到集成环信 UIKit，并解决在集成过程中可能遇到的各种问题。最后，我们还将介绍如何使用 Expo 的 EAS Build 服务来云打包您的应用，以及如何将应用提交到 App Store 或 Google Play。

无论您是一个希望快速上手 React Native 开发的新手，还是一个寻求优化开发流程的资深开发者，本文都将为您提供实用的指导和解决方案。让我们开始吧！

创建 Expo 项目并集成环信的 React Native UIKit

1. 创建 Expo 项目

首先，访问 Expo 官网 Create a project 来创建一个新的项目。为了构建一个空白项目，我们选择 blank 模板：

npx create-expo-app@latest --template blank

建议在创建项目时使用科学上网，以确保安装的稳定性。

2. 运行项目

我已经配置好了 Xcode 和对应的模拟器环境，因此可以直接运行 run-ios 脚本命令并成功启动。
在这里插入图片描述

3. 集成环信 UIKit

打开环信 UIKit 的 GitHub Wiki 文档 quick-start.cn 并按照以下步骤安装 UIKit 相关依赖：

yarn add @react-native-async-storage/async-storage@^1.17.11 \
@react-native-camera-roll/camera-roll@^5.6.0 \
@react-native-clipboard/clipboard@^1.11.2 \
date-fns@^2.30.0 \
pinyin-pro@^3.18.3 \
pure-uuid@^1.6.3 \
react-native-agora@^4.2.6 \
react-native-chat-uikit@2.2.1 \
react-native-chat-sdk@1.5.1 \
react-native-audio-recorder-player@^3.5.3 \
@easemob/react-native-create-thumbnail@^1.6.6 \
react-native-device-info@^10.6.0 \
react-native-document-picker@^9.0.1 \
react-native-fast-image@^8.6.3 \
react-native-file-access@^3.0.4 \
react-native-gesture-handler@~2.9.0 \
react-native-get-random-values@~1.8.0 \
react-native-image-picker@^7.0.3 \
react-native-permissions@^3.8.0 \
react-native-safe-area-context@4.5.0 \
react-native-screens@^3.20.0 \
react-native-video@^5.2.1 \
react-native-web@~0.19.6 \
react-native-webview@13.2.2 \
twemoji@14.0.2

其中 react-native-agora@^4.2.6、react-native-chat-uikit@2.2.1、react-native-chat-sdk@1.5.1 分别为声网音视频依赖 SDK，环信 UI Kit 依赖 SDK、以及环信 React Native Chat 依赖 SDK。建议在安装这三个依赖时选择最新版本。

4. 创建 iOS 和 Android 文件夹并添加对应权限

运行以下命令开始 prebuild 并成功完成：

npx expo prebuild --clean

在这里插入图片描述

5. 导入 UI Kit SDK 相关组件

import {
  Container,
  ConversationDetail,
  TextInput,
  useChatContext,
} from 'react-native-chat-uikit';

6. 遇到的一些问题及解决方式

热更新报错

在这里插入图片描述

解决方式：

安装 expo-dev-client
在项目根目录下创建一个 index.js 文件：

import 'expo-dev-client';
import { registerRootComponent } from 'expo';
import App from './App';

registerRootComponent(App);

其他问题

Error: Requiring unknown module “645”. If you are sure the module exists, try restarting Metro. You may also want to run yarn or npm install., js engine: hermes"

在这里插入图片描述

解决方式：重新运行 yarn run start , 并引入下面的问题。

CommandError: No development build (com.neohuang1998.easemobuikittestdemo) for this project is installed. Please make and install a development build on the device first.

在这里插入图片描述

解决方式：我的解决是重新执行npx run:ios
但又引入下面的问题：

在这里插入图片描述

解决方式：我的解决是在 Xcode 中打开该项目，箭头所指会有个蓝色的get,点击get就会开始下载对应的模拟器。

在这里插入图片描述

具体参考的解决方式是 StackOverflow 上的这篇文章。

7. Expo 项目云打包（EAS Build）

1. 安装 EAS CLI

首先，安装 EAS CLI，这是用来管理 EAS Build 的命令行工具：

npm install -g eas-cli

2. 初始化 EAS 项目

进入你的项目根目录，初始化 EAS 配置文件：

eas build:configure

这将会在项目根目录生成一个 eas.json 文件，其中包含了构建配置选项。初始化过程中，你需要选择应用的构建平台（iOS、Android 或两者）。

3. 配置构建参数

在 eas.json 文件中，你可以设置不同的构建配置，如 development、preview 和 production。每种配置可以包含不同的构建选项，例如：

{
  "cli": {
    "version": ">= 12.3.0",
    "appVersionSource": "remote"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "distribution": "internal"
    },
    "production": {
      "autoIncrement": true
    }
  },
  "submit": {
    "production": {}
  }
}

配置文件允许你根据需要定制构建的行为。

4. 登录 Expo 账户

eas login

5. 运行构建命令

使用以下命令开始构建：

eas build -p ios   # 构建 iOS 应用
eas build -p android # 构建 Android 应用

你可以添加 --profile 参数来指定使用 eas.json 中的不同构建配置（例如 production、preview 等）。

6. 监控构建过程

构建过程开始后，EAS 会在云端处理你的构建任务，你可以在终端中看到构建进度。构建完成后，你会收到下载链接用于下载构建好的文件（如 IPA 或 APK）。

7. 提交应用到 App Store 或 Google Play

对于 iOS 构建，你可以使用 EAS CLI 直接上传到 App Store Connect：

eas submit -p ios

对于 Android 构建，你可以使用相同的命令上传到 Google Play：

eas submit -p android

8. 管理构建和提交历史

在 Expo 的 EAS Build Dashboard 上可以查看所有的构建历史记录、构建状态和下载链接。

其他注意事项

问题一

Apple 开发者账户配置：构建 iOS 应用时，需要配置 Apple 开发者账户的凭据以及处理签名和证书。
Android 密钥管理：构建 Android 应用时，需要管理好密钥库文件（keystore）和签名密钥。

通过 EAS Build，开发者可以直接在云端构建原生应用，而不需要本地配置复杂的原生开发环境。

问题二

build Android failed：react-native-chat-uikit 库使用时，按照文档所依赖的 react-native-gesture-handler 以及 react-native-safe-area-context 在集成后 eas build 的时候打包失败。最终确认是由于这两个库版本过老导致，经过升级进行了解决，对应经过测试升级没有问题的版本库为：

"react-native-gesture-handler": "^2.20.0",
"react-native-safe-area-context": "^4.11.1"