【全攻略】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"

相关文档：

  • 注册环信即时通讯IM：https://console.easemob.com/user/register

  • 环信IM集成文档：https://docs-im-beta.easemob.com/document/ios/quickstart.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/487277.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

乌龟咬人，小意外中的大警示

乌龟咬人，小意外中的大警示

近日，听闻有朋友被自家乌龟咬了手指，这看似滑稽的小意外，实则蕴含着不少值得我们深思的安全与责任问题。 乌龟，在大众的认知里，向来是行动迟缓、性情温和的宠物代表。它们慢悠悠地爬行，憨态可掬的模样常常…
阅读更多...
java+springboot+mysql论文分享平台

java+springboot+mysql论文分享平台

项目介绍： 使用javaspringbootmysql开发的论文分享平台，系统包含超级管理员、管理员、用户角色，功能如下： 用户：系统前台首页；论文分类；论文共享（用户可以上传、下载、评论论文文档…
阅读更多...
《探索形象克隆：科技与未来的奇妙融合》

《探索形象克隆：科技与未来的奇妙融合》

目录 一、什么是形象克隆 二、形象克隆的技术原理 三、形象克隆的发展现状 四、形象克隆的未来趋势 五、形象克隆的应用场景 六、形象克隆简单代码案例 Python 实现数字人形象克隆 Scratch 实现角色克隆效果（以猫为例） JavaScript 实现 Scratc…
阅读更多...
帝可得-运营管理App

帝可得-运营管理App

运营管理App Android模拟器 本项目的App客户端部分已经由前端团队进行开发完成，并且以apk的方式提供出来，供我们测试使用，如果要运行apk，需要先安装安卓的模拟器。 可以选择国内的安卓模拟器产品，比如：网…
阅读更多...
案例-商品列表（组件封装）

案例-商品列表（组件封装）

标签组件封装 1.双击显示，自动聚焦 2.失去焦点，隐藏输入框 标签一列，不同行的标签内容不同，但是除此之外其他基本一致，所以选择用 标签组件 将这一部分封装为一个组件，需要时组件标签展示。 首先标签处一进…
阅读更多...
Linux socket编程

Linux socket编程

目录 基础概念端口和端口号Socket（套接字）UDP和TCP的概念 Socket编程实战socket的类型struct sockaddrstruct sockaddr_in网络字节序socket APITCP网络编程流程分析UDP Demo样例 other概念补充setsockopt函数心跳机制面向字节流与面向报文的理解 参考 基…
阅读更多...
Linux update-alternatives 命令详解

Linux update-alternatives 命令详解

1、查看所有候选项 sudo update-alternatives --list （java筛选​​​​​​​sudo update-alternatives --list java） 2、​​​​​​​更换候选项 sudo update-alternatives --config java 3、自动选择优先级最高的作为默认项 sudo update-alterna…
阅读更多...
unity3d—demo(2d人物左右移动发射子弹)

unity3d—demo(2d人物左右移动发射子弹)

目录 人物代码示例： 子弹代码示例： 总结上面代码： 注意点： 人物代码示例： using System.Collections; using System.Collections.Generic; using UnityEngine;public class PlayerTiao : MonoBehaviour {public f…
阅读更多...
JSP技术发展现状

JSP技术发展现状

多年前，Java入门时学习的JSP可谓时风光无限，J2EE如日中天，短短数年，技术迭代更新光速般发展，有些技术慢慢就退出历史舞台。 JSP（Java Server Pages） 技术在早期 Java Web 开发中曾是构建动态网…
阅读更多...
科技绽放-EtherCAT转Profinet网关智能连接项目

科技绽放-EtherCAT转Profinet网关智能连接项目

一、项目名称 备选名称及含义：开疆智能EtherCAT转Profinet网关智能连接项目：直接体现了从Profinet到EtherCAT的连接核心内容，智能连接突出了该项目的技术特点。工业互联方案强调了该项目在工业领域实现不同协议设备互联的目标，方案…
阅读更多...
《计算机网络》（408大题）

《计算机网络》（408大题）

2009 路由转发和静态路由的计算 子网划分、路由聚合的计算 注：CIDR中的子网号可以全为0或1，但是其主机号不允许。 注： 这里其实是把到互联网的路由当做了一个默认路由（当一个目的网络地址与路由表中其他都不匹配时，…
阅读更多...
matlab读取NetCDF文件

matlab读取NetCDF文件

matlab对NetCDF文件进行信息获取和读取数据 文章目录 前言一、什么是NetCDF文件二、读取NetCDF文件数据 1.引入库 2.读入数据总结 前言 在气象学中，许多气象数据存储在NetCDF文件中，后缀为.nc，通常可以用NCL、python和MATLAB等对该…
阅读更多...
MySQL用户管理、权限管理练习

MySQL用户管理、权限管理练习

1.使用root用户登录MySQL客户端，创建一个名为userl的用户，初始密码为123456; 创建一个名为user2的用户，无初始密码。然后，分别使用uesr1、user2登录MySQL 客户端。 2.使用root用户登录，将user2用户的密码修改为abcabc。…
阅读更多...
SpringAOP手动模拟实现反射注解Jdk动态代理

SpringAOP手动模拟实现反射注解Jdk动态代理

代理 package com.xtq.aop.proxy;import com.xtq.annotations.After; import com.xtq.annotations.Before; import com.xtq.annotations.Pointcut;import java.lang.annotation.Annotation; import java.lang.reflect.InvocationHandler; import java.lang.reflect.Invocation…
阅读更多...
算法-字符串-3.无重复字符的最长子串

算法-字符串-3.无重复字符的最长子串

一、思路&#xff1a; 无重复针对唯一的元素首选哈希表方法 在字符串中找出最长字串——动态数组 二、使用的一些常见方法 1.HashMap a.声明 HashMap<Character,Integer> mapnew HashMap(); b.添加元素 map.put(s.charAt(i),i); c.查询是否有对应的元素存在并获取 m…
阅读更多...
Ubuntu中安装配置交叉编译工具并进行测试

Ubuntu中安装配置交叉编译工具并进行测试

01-下载获取交叉编译工具的源码 按照博文 https://blog.csdn.net/wenhao_ir/article/details/144325141的方法&#xff0c;把imx6ull的BSP下载好后&#xff0c;其中就有交叉编译工具。 当然&#xff0c;为了将来使用方便&#xff0c;我已经把它压缩并传到了百度网盘&#xff…
阅读更多...
Idea实现定时任务

Idea实现定时任务

定时任务 什么是定时任务&#xff1f; 可以自动在项目中根据设定的时长定期执行对应的操作 实现方式 Spring 3.0 版本之后自带定时任务&#xff0c;提供了EnableScheduling注解和Scheduled注解来实现定时任务功能。 使用SpringBoot创建定时任务非常简单&#xff0c;目前主要…
阅读更多...
Cesium 问题： 添加billboard后移动或缩放地球，标记点位置会左右偏移

Cesium 问题： 添加billboard后移动或缩放地球，标记点位置会左右偏移

文章目录 问题分析原先的：添加属性——解决漂移移动问题产生新的问题：所选的经纬度坐标和应放置的位置有偏差解决坐标位置偏差的问题完整代码问题 添加 billboard 后， 分析 原先的： // 图标加载 function addStation ({lon, lat, el, testName
阅读更多...
PHP中GD库的使用

PHP中GD库的使用

由于我要用到php的验证码 <?php session_start();// 生成验证码 $random_code substr(md5(uniqid(mt_rand(), true)), 0, 6);// 将验证码保存到 session 中 $_SESSION[captcha] $random_code;// 创建图片 $font 6; $image_width 100; $image_height 40;// 创建图像 $…
阅读更多...
精确的单向延迟测量：使用普通硬件和软件

精确的单向延迟测量：使用普通硬件和软件

论文标题&#xff1a;Precise One-way Delay Measurement with Common Hardware and Software&#xff08;精确的单向延迟测量&#xff1a;使用普通硬件和软件&#xff09; 作者信息&#xff1a;Maciej Muehleisen 和 Mazen Abdel Latif&#xff0c;来自Ericsson Research Eri…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023