RN_iOS项目部署流程实例

2023-11-09

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

RN_iOS项目部署流程实例 的相关文章

随机推荐

  • 怎么给input插入一个图片

    html部分
  • 强化学习笔记:连续控制 & 确定策略梯度DPG

    1 离散控制与连续控制 之前的无论是DQN Q learning A2C REINFORCEMENT SARSA什么的 都是针对离散动作空间 不能直接解决连续控制问题 考虑这样一个问题 我们需要控制一只机械手臂 完成某些任务 获取奖励 机械
  • C++生成随机字符串的程序

    include
  • set-cookie失效之坑

    最近做的一个微信公众号项目 打开网页登录的时候就会出现每次请求sessionid不一致的问题 先贴图 session是后台生成的 由于验证码信息是放了在session里面 每次的session不一致 导致没有办法从session里面拿到响应
  • springmvc整合freemarker以及前端的一些坑

    一 SpringMVC整合freemarker配置 1 引入相关jar包 html view plain copy
  • 【LVGL】ANIM(动画)学习

    animate 通用动画 过渡动画与通用动画的区别 过渡动画只有在状态发生改变时发生 通用动画可以在任意时刻进行 过渡动画支是样式 style 的一部分 通用动画和样式是相互独立的 实际上 过渡的底层也使用的是动画 创建动画 为了创建动画
  • 海康摄像头视频调用出错,Jni Error(app bug): accessed stale local reference解决办法

    项目中要在Android手机中调用海康摄像头拍摄的画面 在公司网管配置好了网络地址 不要与其他局域网内地址冲突 和端口 并激活摄像头设备后 通过SADPTool 海康提供的摄像头搜索工具 可以自动检索到当前局域网内已激活的设备 通过设备列表
  • 算法笔记:字符串编辑距离(Edit Distance on Real sequence,EDR)/ Levenshtein距离

    1 算法介绍 给定两个长度分别为n和m的轨迹tr1和tr2 最小距离的匹配阈值e 两条轨迹之间的EDR距离就是需要对轨迹tr1进行插入 删除或替换使其变为tr2的操作次数 动态规划的算法如下 红色的是还没有考虑的两个轨迹部分 黑色是已经考虑
  • VScode 头文件添加路径

    先用调试运行建立三 有的是四个 个json文件 具体的操作步骤可以 点击这里转载 包含头文件路径主要是两个文件 一个是task json和c cpp properties json文件 1先打开task json文件 然后找到这一栏 最下面
  • Jmeter 三种提取方式 —— 关联实例

    当请求之间有依赖关系 比如一个请求的入参是另一个请求返回的数据 这时候就需要用到关联处理 Jmeter中常用的关联方法 正则表达式提取器 XPath提取器 JSON提取器 regex n 匹配除换行符 n r 之外的任何单个字符 零次或多次
  • Linux——shell脚本的基础篇(变量定义、变量种类、变量操作)

    文章目录 一 变量的定义 二 变量名称的规范 三 使用变量 四 在shell脚本中的变量种类 五 字符的转译及变量的声明 六 变量值的传递 一 变量的定义 变量即在程序运行过程中它的值是允许改变的量 变量是用一串固定的字符来表示不固定的值的
  • 【二叉树】44 二叉树:度为2的结点个数

    问题描述 内容 1 请参照链表的ADT模板 设计二叉树并逐步完善的抽象数据类型 由于该环境目前仅支持单文件的编译 故将所有内容都集中在一个源文件内 在实际的设计中 推荐将抽象类及对应的派生类分别放在单独的头文件中 参考教材 课件 以及网盘中
  • 斜率优化

    如果转移方程中含有 既有i 的项又有j的项 往往可以考虑斜率优化 斜率优化的目标是将dp式转化为 y kx b 这种形式 P3195 HNOI2008 玩具装箱TOY 题意 有1 n个玩具需要打包 每个玩具的有其长度 可以一段区间一段区间地
  • 珍藏多年的各类资源网站分享给大家

    学习网站 素材巷 这个应该有少数人知道吧 是我近几年来第一次遇到这样的网站 一个专注于分享文字素材的分享平台 涵盖文学范围广 包含散文 小说 诗词 戏曲 科普 天文 地志 阴阳 医卜 僧道 技艺 高考作文等 网址 素材巷 文字写作素材分享平
  • Unity3d接入googleplay内购详细说明(二)

    因为本文内容比较多 整理花费时间比较长 故分几篇完成 以下为本文目录结构 方便查阅 Unity3d接入googleplay内购详细说明 一 引言 一 准备条件 二 谷歌开发者后台应用创建说明 Unity3d接入googleplay内购详细说
  • 《Python进阶系列》二:Python中的 for-else 语法

    for else 语法 你是否见过这个语法 for i in xxx pass else pass 是不是一脸懵逼 啊哈哈哈 事实上 在 Python 中 else不仅可以与 if搭配使用 还可以与 for结合 想不到吧 我们先来看一个例子
  • 结合ruoyi-cloud和ruoyi-app实现微信小程序的授权登录

    文章目录 1 前言 1 1 环境准备 1 2 登录流程图 2 小程序代码 2 1 RuoYi App编辑api login js 2 4 新增按钮微信授权登录 2 6 新增wxHandleLogin方法获取code 2 9 创建sendWx
  • 重置计算机的本地策略,Win10怎样重置组策略/安全策略

    很多windows10系统用户都会使用注册表或组策略来深度调试系统 这些系统自带工具虽然能够实现一些表面上没有的功能 但也可能会让我们 翻车 对于注册表来说 修改之前做好备份是硬道理 恢复起来也很方便 但对于组策略和安全策略 要如何才能恢复
  • wxPython 菜单栏 工具栏 状态栏

    coding utf 8 Created on Mon Jun 10 03 56 09 2019 QQ群 476842922 欢迎加群讨论学习 author Administrator coding utf 8 import wx impo
  • RN_iOS项目部署流程实例

    文章目录 1 环境配置 1 1 安装node 1 2 安装Watchman 1 3 安装npm 1 4 安装cocoapods 2 百家云demo下载 3 运行百家云demo 3 1 顺利的话 3 2 踩过的坑 按这个目录流程走 3 2 1