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可以减少加载时间,提高应用性能。
相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
爱编程的喵11 小时前
React Router Dom 初步:从传统路由到现代前端导航
前端·react.js
阳火锅11 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊11 小时前
react中为啥使用剪头函数
前端·javascript·react.js
多啦C梦a11 小时前
【适合小白篇】什么是 SPA?前端路由到底在路由个啥?我来给你聊透!
前端·javascript·架构