react-native 打离线包

2024-05-09 00:49:40

Android

打包命令：

eact-native bundle

Options:

–entry-file Path to the root JS file, either absolute or relative to JS root [required]

–platform Either “ios” or “android”

–transformer Specify a custom transformer to be used (absolute path) [default: “/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js”]

–dev If false, warnings are disabled and the bundle is minified [default: true]

–prepack If true, the output bundle will use the Prepack format. [default: false]

–bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json

–bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required]

–bundle-encoding Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). [default: “utf8”]

–sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map

–assets-dest Directory name where to store assets referenced in the bundle

–verbose Enables logging [default: false]

打包步骤

1.在工程根目录下执行打包命令，比如
react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.jsbundle --platform android --assets-dest ./android/app/src/main/res/ --dev false
注意:[./android/app/src/main/assets/]文件夹存在。

2.增量升级的话不要把图片资源直接打包到res中，脚本如下：
react-native bundle --entry-file index.android.js --bundle-output ./bundle/androidBundle/index.android.jsbundle --platform android --assets-dest ./bundle/androidBundle/ --dev false

3.保证MainActivity.java中的setBundleAssetName与你的jsbundle文件名一致，比如.setBundleAssetName(“index.android.jsbundle”)就与我生成的资源名一致

IOS

打包命令：

Options:

–entry-file Path to the root JS file, either absolute or relative to JS root [required]

–platform Either “ios” or “android”

–transformer Specify a custom transformer to be used (absolute path) [default: “/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js”]

–dev If false, warnings are disabled and the bundle is minified [default: true]

–prepack If true, the output bundle will use the Prepack format. [default: false]

–bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json

–bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required]

–bundle-encoding Encoding the bundle should be written in (https://nodejs.org/api/buffer.html#buffer_buffer). [default: “utf8”]

–sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map

–assets-dest Directory name where to store assets referenced in the bundle

–verbose Enables logging [default: false]

打包步骤

1.在工程根目录下执行打包命令，比如react-native bundle –entry-file index.ios.js –bundle-output ./bundle/iosBundle/index.ios.jsbundle –platform ios –assets-dest ./bundle/iosBundle –dev false
注意要先保证bundle文件夹存在。
2.在xcode中添加assets【必须用Create folder references的方式，添加完是蓝色文件夹图标】和index.ios.jsbundle
3.参考官方文档，修改AppDelegate.m文件,使用OPTION 2处的代码 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”index.ios” withExtension:@”jsbundle”];

ios打包遇到的问题

1.离线包如果开启了chrome调试，会访问调试服务器，而且会一直loading出不来。
2.如果bundle的名字是main.jsbundle,app会一直读取旧的,改名就好了。。。非常奇葩的问题，我重新删了app，clean工程都没用，就是不能用main.jsbundle这个名字。
3.必须用Create folder references【蓝色文件夹图标】的方式引入图片的assets，否则引用不到图片
4.执行bundle命令之前，要保证相关的文件夹都存在

react-native 打离线包相关推荐

react native在growth stack中的角色思考
Growth Hacker在国内外的互联网界近几年都是比较火热的词,互联网巨头Facebook也许是践行Growth Hacker最好的公司.然而概念吵的火并不等于做的好,如何落地Growth Hac ...
React Native ios打包
开发React Native的过程成,js代码和图片资源运行在一个Debug Server上,每次更新代码之后只需要使用command+R键刷新就可以看到代码的更改,这种方式对于调试来说是非常方便的. ...
React Native使用指南-在设备上运行
注意在iOS设备上运行React Native应用需要一个Apple Developer account并且把你的设备注册为测试设备.本向导只包含React Native相关的主题. 译注:从XCod ...
React Native运行原理解析
Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端 ...
react native 研究
一､React Native所做的工作 1)更新DOM 只更新不读取. 2)响应事件响应事件,状态变化,告知渲染. 二､React Native的优点与缺点 1､优点: 1)最后生成原生应用,交互和 ...
React Native发布——使用AppCenter
前言本文基于React Native开发环境搭建,默认已搭建好XXProject的react native项目.本文appcenter cli版本为2.10.0,本文法布时,coderova已停用, ...
fragment中文网_更新 · React Native 中文网
时刻将 React Native 更新到最新的版本,可以获得更多 API.视图.开发者工具以及其他一些好东西(译注:官方开发任务繁重,人手紧缺,几乎不会对旧版本提供维护支持,所以即便更新可能带来一些兼 ...
React Native —— App
使用 React Native 作为 app 框架,Redux 作为数据层,因此我们需要选用一些支持性的技术和工具: 开源的 Parse Server 做数据存储 - 运行在 Node.js 上. F ...
【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
【React Native】react-navigation导航使用方法
目录集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...

最新文章

热门文章