expo 构建环信RN UIKIT从构建到云打包全流程。

fix一个write十个
403 阅读5分钟

前言

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

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

1. 创建 Expo 项目

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

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

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

2. 运行项目

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

image.png

3. 集成环信 UI Kit

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

  • 安装uikit相关依赖
yarn add @react-native-async-storage/async-storage \
@react-native-camera-roll/camera-roll \
@react-native-clipboard/clipboard \
date-fns \
pinyin-pro \
pure-uuid \
react-native-chat-uikit \
react-native-chat-sdk \
react-native-audio-recorder-player \
react-native-create-thumbnail \
react-native-device-info \
react-native-document-picker \
react-native-fast-image \
react-native-file-access \
react-native-gesture-handler \
react-native-get-random-values \
react-native-image-picker \
react-native-permissions \
react-native-safe-area-context \
react-native-screens \
react-native-video \
react-native-web \
react-native-webview \
twemoji

其中 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

项目就开始prebuild，并成功完成如下图所示。

image.png

5. 导入 UI Kit SDK 相关组件

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

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

热更新报错

image.png

image.png

解决方式：

  • 安装 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"

image.png

image.png

解决方式：重新运行 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.

image.png

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

image.png

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

image.png

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

然后重新执行npx run:ios出现以下输出。

image.png

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"

扩展更新

目前经过验证最新可成功跑通项目的创建方式如下：

npx create-expo-app@latest

yarn set version 4.6.0

yarn config set nodeLinker node-modules

yarn run ios

yarn run expo prebuild

yarn add @react-native-async-storage/async-storage \
@react-native-camera-roll/camera-roll \
@react-native-clipboard/clipboard \
date-fns \
pinyin-pro \
pure-uuid \
react-native-chat-uikit \
react-native-chat-sdk \
react-native-audio-recorder-player \
react-native-create-thumbnail \
react-native-device-info \
react-native-document-picker \
react-native-fast-image \
react-native-file-access \
react-native-gesture-handler \
react-native-get-random-values \
react-native-image-picker \
react-native-permissions \
react-native-safe-area-context \
react-native-screens \
react-native-video \
react-native-web \
react-native-webview \
twemoji

cd ios
pod install
cd ..
yarn run start
```
avatar
文章
阅读
粉丝