ReactNative进阶(五十四):真机运行报错 “No bundle URL present“解决方案

文章目录

一、前言

rn项目热部署时iphone设备弹出如下错误弹窗:No bundle URL present

遇到以上问题,需要手动生成ios下的main.jsbundle文件。但是使用另一台MacBook Pro 就没有类似问题。

二、问题分析

网上给出的解决方法:生成main.jsbundle文件,在终端项目目录下执行:

java 复制代码
react-native bundle --dev true --entry-file index.js --bundle-output ios/main.jsbundle --platform ios --assets-dest ./ios

或在 package.json 里面添加以下执行命令,终端执行yarn buildios即可生成main.jsbundle文件:

java 复制代码
"buildios":"react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"

2、然后在TARGES 找到这里并添加,然后重新打包就可以了

实际执行阶段,遇到如下错误:

java 复制代码
Loading dependency graph...Failed to construct transformer:  Error: Cannot create a string longer than 0x1fffffe8 characters

出现以上问题是由于watchman缺失导致,需安装下watchman

shell 复制代码
brew install watchman
brew install gcc

由于资源有限,watchman 安装过程比较曲折耗时,请耐心等待⌛️

安装成功后,重新生成main.jsbundle文件

java 复制代码
react-native bundle --dev true --entry-file index.js --bundle-output ios/main.jsbundle --platform ios --assets-dest ./ios

三、走近 main.jsbundle

在React Native中使用main.jsbundle构建和运行发布是一种优化应用性能和减少包大小的方法。

在React Native中,main.jsbundle是一个包含所有JavaScript代码的文件。它是通过将所有的JavaScript代码打包成一个文件来实现的,以便在应用运行时加载和执行。

main.jsbundle属于React Native应用构建和发布方案中的一种。它是一种静态资源文件,用于存储React Native应用的JavaScript代码。

使用main.jsbundle构建和运行发布方案有以下优势:

  • 减少包大小 :将所有的JavaScript代码打包成一个文件可以减少应用的包大小,从而提高应用的加载速度和性能。
  • 加快应用启动时间:由于只需要加载一个文件,而不是多个文件,因此应用的启动时间会更快。
  • 提高应用的安全性 :将JavaScript代码打包成一个文件可以减少代码被篡改的风险,提高应用的安全性。

使用main.jsbundle构建和运行发布方案适用于以下场景:

  • 发布应用到线上环境 :在将React Native应用发布到线上环境时,使用main.jsbundle可以减少包大小和提高应用性能。
  • 优化应用性能 :对于包含大量JavaScript代码的应用,使用main.jsbundle可以减少加载时间,提高应用性能。
相关推荐
十一吖i3 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保4 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
生莫甲鲁浪戴5 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡7 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
拉不动的猪8 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子8 小时前
nextTick的使用
前端·javascript·vue.js
Devil枫10 小时前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript
惺忪979810 小时前
回调函数的概念
开发语言·前端·javascript
前端 贾公子10 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
天外飞雨道沧桑10 小时前
JS/CSS实现元素样式隔离
前端·javascript·css·人工智能·ai