自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-12-05 18:01 react native  react.js  javascript  

前言

在当今快速发展的移动应用领域，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"

相关文档：


原文地址：https://blog.csdn.net/huan132456765/article/details/144246148

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

  • 从 GitLab.com 到 JihuLab.com 的迁移指南

    本文分享从 GitLab.com 到 JihuLab.com 的迁移指南。近期，GitLab Inc. 针对其 SaaS 产品做了限制，如果被判定为国内用户，则会建议使用其在国内的发布版本极狐GitL

    阅读更多2024-12-26
  • 【数据可视化复习方向】

    文本数据大致可以分为三种：单文本、文档集合和时序文本数据；对应的文本可视化也可分为：文本内容可视化、文本关系可视化、文本多层面信息的可视化。文本分布可视化实际上是引入了词语在文本当中的位置、句子长度等

    阅读更多2024-12-26
  • C# 使用Newtonsoft.Json

    有OptOut和OptIn两种模式。OptOut是默认值，类中所有公有成员会被序列化，不想被序列化的属性可以用[JsonIgnore]特性标记；OptIn模式下，默认所有成员不会被序列化，只有标有[J

    阅读更多2024-12-26
  • SQL进阶技巧：如何计算摆动的序列？| LeetCode 376.-摆动序列

    如果连续数字之间的差严格地在正数和负数之间交替，则数字序列称为第一个差（如果存在的话）可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。例如，是一个，因为差值是正负交替出现的。可以

    阅读更多2024-12-26
  • 明解FPGA中LUT原理

    当用户通过原理图或者HDL语言描述了一个逻辑电路以后，FPGA软件会自动计算逻辑电路的所有可能结果，并将结果事先写入RAM。这样，每输入一个信号进行逻辑运算就相当于输入一个地址进行查表，找出地址对应的

    阅读更多2024-12-26
  • 数据结构的基础与应用

    线性数据结构：数据元素在结构中按线性关系排列。例如：数组、链表、栈、队列。非线性数据结构：数据元素之间不按线性关系排列。例如：树、图。我们将重点介绍线性数据结构中的基本类型和一些常见的非线性数据结构。

    阅读更多2024-12-26
  • linux创建虚拟串口

    要将一个终端bash作为串口，并使其可以被pyserial打开，你可以使用。与运行在虚拟串口上的bash进行通信了。请注意，虚拟串口的设备文件名（如。是一个多功能的网络工具，可以创建虚拟串口对。）可能

    阅读更多2024-12-26
  • VSCode 插件开发实战（一）：快速入门插件开发

    Visual Studio Code（简称VSCode）是一款非常流行的代码编辑器，它不仅轻量、快速，还支持各种扩展插件（Extension），可以大大提升我们的开发效率。如果你觉得现有的插件无法满足

    阅读更多2024-12-26
  • 威尔克斯(Wilks)分布

    威尔克斯(Wilks)分布

    阅读更多2024-12-26
  • HarmonyOS NEXT 实战之元服务：静态案例效果---歌单推荐

    HarmonyOS NEXT 实战之元服务：静态案例效果---歌单推荐

    阅读更多2024-12-26
自学内容网
Copyright © 2015-2024