RN_iOS项目部署流程实例

news2025/1/19 17:23:10

文章目录

    • 1、环境配置
      • 1.1 安装node
      • 1.2 安装Watchman
      • 1.3 安装npm
      • 1.4 安装cocoapods
    • 2、百家云demo下载
    • 3、运行百家云demo
      • 3.1 顺利的话
      • 3.2 踩过的坑(按这个目录流程走)
        • 3.2.1 npm install -g react-native-cli
        • 3.2.2 安装:npm install
        • 3.2.3 npm降级:sudo npm install npm@3.8.6 -g出错
        • 3.2.4 降级后重新安装:npm install
        • 3.2.5 ios目录下pod install出错
        • 3.2.6 react-native-gesture-handler出错
        • 3.2.7 react-native run-ios一直加载
    • 4、其他问题(不一定出现)
      • 4.1 目录文件缺失
      • 4.2 unable to open file in target xcode
      • 4.3 端口冲突
    • 5、说明

1、环境配置

1.1 安装node

brew install node

1.2 安装Watchman

brew install watchman

1.3 安装npm

sudo npm install npm -g

速度过慢可以切换源,https -> http,这样网速就会好很多

npm config set registry http://registry.npmjs.org

如果使用 npm 安装node_modules 总是提示报错:报错:npm resource busy or locked。可删除以前安装的 node_modules 再重新安装

npm cache clean
npm install

1.4 安装cocoapods

使用gem 安装插件时,可能会遇到报错You don’t have write permissions for the /usr/bin directory。即使在安装命令前加上sudo,也不行。可以使用:
命令:sudo gem install XXX -n /usr/local/bin
如XXX:CocoaPods

2、百家云demo下载

git clone https://gitee.com/ekeguan/dashboard/projects/ekeguan/baijiayun_app_rn/code/

3、运行百家云demo

3.1 顺利的话

如果有幸没有遇到bug,直接执行

  • 第一步npm install -g react-native-cli
  • 安装npm install
  • 启动react-native start
  • 运行(新开一个终端运行测试下)npm test

3.2 踩过的坑(按这个目录流程走)

3.2.1 npm install -g react-native-cli

在这里插入图片描述

原因分析:没有权限
解决方案:加上sudo,sudo npm install -g react-native-cli,输入密码即可
在这里插入图片描述

3.2.2 安装:npm install

情况描述:无权限,sudo npm install依然出错
在这里插入图片描述
原因分析:npm 版本太高,需要降低版本
解决方案:sudo npm install npm@3.8.6 -g

3.2.3 npm降级:sudo npm install npm@3.8.6 -g出错

在这里插入图片描述
原因分析:淘宝镜像安装失败(如果之前没有更换则不出错)
解决方案:
(1)有线网换无线网、换热点等再试一次
(2)更换安装源

# 查看自己的安装源
npm config get registry

# 更换npm源为国内淘宝镜像
npm config set registry http://registry.npm.taobao.org/

# 或者更换为国内npm官方镜像
npm config set registry http://registry.cnpmjs.org/

# 还原npm源
npm config set registry https://registry.npmjs.org/

在这里插入图片描述

3.2.4 降级后重新安装:npm install

若无权限:加上sudo,输入密码继续安装(有点慢,耐心等待~)
出错,安装再次失败
在这里插入图片描述
不需要重复sudo npm install(死循环,又报错提示版本不符,猜测因为版本不是最新,因为之前有降级)
安装不了了,可以使用淘宝镜像安装:

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org(速度也比较慢)
如果依然不行,使用npm install --save-dev html-webpack-plugin
此时正常install,但是会出现一个错误信息:UNMET PEER DEPENDENCY webpack@^5.20.0
使用npm install node-sass解决
在这里插入图片描述

3.2.5 ios目录下pod install出错

原因分析:权限问题
解决方案:sudo gem install cocoapods -n /usr/local/bin设置访问权限后再pod install。
出现以下界面pod成功。
在这里插入图片描述

3.2.6 react-native-gesture-handler出错

报错

  1. In file included from /Users/shenfan/Desktop/baijiayun/baijiayun_app_rn/node_modules/react-native-gesture-handler/ios/RNGestureHandlerManager.m:1:
    在这里插入图片描述
    link到原生项目中
    react-native link react-native-gesture-handler
    如果link还是不行,可以手动添加,在Libararies中

3.2.7 react-native run-ios一直加载

cd 到项目根路径
命令:react-native run-ios
这里react-native run-ios执行完一直加载,不能直接运行模拟器,可以使用xcode将原生项目打开,在xcode里能运行起来 就可以在命令行里使用run-ios。在Xcode运行后,终端自动出现。
如果能走到这一步,则可以成功运行。

4、其他问题(不一定出现)

4.1 目录文件缺失

依次执行:

命令:npm install 单独安装依赖包(npm install -g yarn安装yarn可以替换npm install)
命令:pod install

在这里插入图片描述

命令:react-native link

4.2 unable to open file in target xcode

File->Workspace setting->select Legasy Build System

再来一次pod

命令:pod repo remove master pod setup pod install

4.3 端口冲突

在这里插入图片描述
错误原因:端口冲突

  • cd 到项目目录
  • react-native start lsof -n-i4TCP:8081//这句可以看打印出8081端口下的服务
  • kill -9//终止你其他占用端口

5、说明

如果运行其他rn项目,每个项目都得重新npm,这些步骤需要再次重复。
原因:node_module是不可以全局的,而且node_module还可以嵌套node_module。幸好每个项目仅第一次要npm。npm有的时候下载很慢,可设置npm淘宝镜像

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新一代智能柔性换层跨巷道多车调度的HEGERLS托盘四向穿梭车物流解决方案

随着电子商务和智能制造技术的快速发展,对自动化仓储、密集仓储、自动搬运系统、自动识别、无线通信等多系统集成的需求也在不断增加,物流设备系统的密集化、自动化、智能化等技术也在不断完善。密集存储技术的优势是空间可用性高、运行模式高效、工作人…

Docker-Compose 入门到实战详尽笔记

本文首发自「慕课网」(www.imooc.com),想了解更多IT干货内容,程序员圈内热闻,欢迎关注"慕课网"或慕课网公众号! 作者:暮闲 | 慕课网讲师 使用过 Docker 的小伙伴们都知道&#xff0…

职场小白如何在工作中快速的升职加薪

缘起 近来连续两个季度很轻松的获得优秀,在这轻松的背后,一定有些原因支撑这领导给了这个评价。坦白说,最近两个季度,无一天加班,因为我们团队不提倡加班;我这边离领导较远,属于两个城市异地办…

一天吃透Java面试八股文

Java的特点 Java是一门面向对象的编程语言。面向对象和面向过程的区别参考下一个问题。 Java具有平台独立性和移植性。 Java有一句口号:Write once, run anywhere,一次编写、到处运行。这也是Java的魅力所在。而实现这种特性的正是Java虚拟机JVM。已编…

chatgpt赋能Python-pyhton如何安装

Python的安装方法 Python是一种高级编程语言,适用于多种开发需求,从网站构建到机器学习。其易用和灵活的语法使其成为一种非常受欢迎的编程语言。本文将向您介绍如何安装Python。 Python的安装步骤 以下是安装Python的步骤。 步骤1:下载P…

[笔记]初识Burpsuit

文章目录 前言一、安装配置1.1 环境1.2 安装过程1.3 科技过程 二、常用功能2.1 Manual penetration testing features2.2 Advanced/custom automated attacks2.3 Automated scanning for vulnerabilities2.4 Productivity tools2.5 Extensions 三、拓展功能 前言 Burp Suite(b…

【C++】 制作游戏壳

目录 前言 GameFrame游戏壳 搭建游戏壳 游戏初始化 游戏重绘 游戏运行 用回调函数实现游戏运行 关闭窗口,退出程序 测试 增加子类继承游戏壳子 继承 多态 优化 测试 总结 使用方法 常见错误 完整代码 GameFrame.h main.cpp 前言 为了方便以后制…

数据存储梳理记录

目录 1、FMDB-第三方SQLite数据库框架1.1 现状1.2 线程安全问题1.2.1 FMDatabase1.2.2 FMDatabaseQueue1.2.3 FMDatabasePool 2、进程间通信2.1 URL Scheme2.2 keyChain2.3 UIPasteboard2.4 UIDocumentInteractionController2.5 local socket2.6 AirDrop2.7 UIActivityViewCont…

Blender 建模小飞机(基础着色、Cycles渲染引擎)

目录 1. 飞机建模1.1 机身1.2 机身表面细分1.3 机翼1.4 尾翼1.5 尾翼镜像1.6 涡轮1.7 添加经纬球1.8 螺旋桨1.9 螺旋桨调整1.10 柱子1.11 柱子镜像1.12 起落架1.13 轮胎1.14 管1.15 镜像1.16 调整飞机角度 2. 着色 渲染2.1 添加地面2.2 飞机着色2.3 其他材质着色2.4 环境纹理2.…

JSDoc 拥抱 Javascript

JSDoc 在 vs code 已经内置了. 可以在 js 文件的开头添加 // ts-check 即可. 在注释中标注来实现一些 ts 的功能. JSDoc 支持以下注解. Types typeparam (or arg or argument)returns (or return)typedefcallbacktemplate Classes Property Modifiers public, private, p…

Go1.21 速览:Go 终于打算进一步支持 WebAssembly 了。。。

大家好,我是煎鱼。 之前写过一篇关于 Go WebAssembly 的相关文章 《一分钟搞明白!快速掌握 Go WebAssembly》,今天带来一则新消息。 想着 Go 过去了那么多年了,只在 Go1.11 支持了 WebAssembly1.0 的部分功能(js/sysca…

一个实际音视频开发问题!

前言: 大家好,今天给大家分享的内容是关于平时在做音频编解码会遇到的一些问题,比如说: 解码播放的时候,播不出来解码播放的时候,画面有条纹编码的时候,修改分辨率大小,没有反应 这三…

深圳先进院李骁健团队:植入式脑机接口技术向医疗器械转化的问题与挑战

近几年植入式脑机接口技术取得了非常显著的进步,从工程实现能力和服务功能场景来说,脑机接口技术已经达到了临床应用的临界点,在实验室科研成果向临床医疗器械转化过程中将会面临新的挑战。本文章由此出发,首先介绍了脑机接口技术…

工程监测无线中继采集仪的常用功能与设置

工程监测无线中继采集仪的常用功能与设置 LoRA 频道与中心频率 无线中继采集发送仪使用频道来设置不同的射频中心频率。 中心频率 MHz 基频 (频道) ,无线中继采集发送仪 的 LoRA 基频已设置为 420 或者 854MHz,可以使用$STRFxxx 重新设置基频。 例如&a…

RT-Thread 1. GD32移植RT-Thread Nano

1. RT-Thread Nano 下载 RT-Thread Nano 是一个极简版的硬实时内核,它是由 C 语言开发,采用面向对象的编程思维,具有良好的代码风格,是一款可裁剪的、抢占式实时多任务的 RTOS。其内存资源占用极小,功能包括任务处理…

Ansys Zemax | 设计抬头显示器时要使用哪些工具 – 第三部分

本文为使用OpticStudio工具设计优化HUD抬头显示器系统的第三部分,主要包含演示了如何使用OpticStudio非序列模式工具正向分析HUD系统的性能以及后续可能的扩展分析。 上两篇文章中(第一部分点此查看,第二部分点此查看),我们主要介绍了如何以逆…

js 定时去重复显示和隐藏的思路

文章目录 思路一 每秒执行思路二 直接用定时器,但是不每秒思路三 es9 异步迭代异步迭代例子1 直接使用例子2 async await例子3 * yield异步遍历器 --》要想用for await of 必须遍历这个简化 for await of解决1秒出现第一个结果,再过2秒出现第二个&#x…

电脑录屏软件哪个好用?3款屏幕录制大师分享!

案例:如何快速录制电脑屏幕? 【每次录制电脑屏幕都要花费我很多时间,十分影响我工作的效率。有没有什么方法可以帮助我实现电脑快速录屏?蹲一款好用的电脑录屏软件!】 电脑录屏是我们在工作或学习中常常需要使用到的功能&#x…

Swagger介绍及Springboot整合Swagger避坑

Swagger简介 前后端分离 vueSpringboot 后端时代:前端之管理静态页面,html>后端。模板引擎 JSP>后端是主力 前后端分离时代: 后端:后端控制层、服务层、数据访问层【后端团队】前端:前端控制层、视图层【前端…

网易云音乐开发--recommendSong搭建

recommendSong页面头部静态搭建 先新建一个 recommendSong 修改上面的nav部分 写上面的样式。我们现在写在这个框里面放个日期 就是让这个文字基于父元素垂直水平居中 样式搞定 recommendSong日期动态显示 之前我们将recommendSong静态头部做好了,现在我们需…