《React-Native系列》8、RN如何打离线包
来源:互联网 发布:win10磁盘优化有几遍 编辑:程序博客网 时间:2024/06/05 08:35
上一篇文章我们谈了bundle文件的加载和维护 ,以及在线包和离线包的区别,那我们今天来谈谈ReactNative如何打离线包。
我们先来看看官网怎么说的
Building your app for production
You have built a great app using React Native, and you are now itching to release it in the App Store. The process is the same as any other native iOS app, with some additional considerations to take into account.
Disabling the developer menu
Building an app for distribution in the App Store requires using the Release
scheme in Xcode. Apps built for Release
will automatically disable the in-app developer menu. This will prevent your users from inadvertently accessing the menu in production.
Using the offline bundle
Set up your app to load your JavaScript, images, and other static assets from its resource bundle rather than the development server. This way you can test the app independently of the development server, and will allow you to distribute the app to beta testers and submit the app to the App Store.
- Open
ios/YourApp/AppDelegate.m
- Uncomment the line,
jsCodeLocation = [[NSBundle mainBundle] ...
App Transport Security
App Transport Security is a security feature, added in iOS 9, that rejects all HTTP requests that are not sent over HTTPS. This can result in HTTP traffic being blocked, including the developer React Native server.
ATS is disabled by default in projects generated using the React Native CLI in order to make development easier. You should re-enable ATS prior to building your app for production by removing the NSAllowsArbitraryLoads
entry from your Info.plist
file in the ios/
folder.
看不出什么...
那,我们还是自己来吧,先来看看打包命令
jack$ react-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 [default: "/Users/jack/RN/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] --reset-cache Removes cached files [default: false]
几个主要的参数:
entry-file: RN的入口文件
bundle-out: 输出bundle文件的输出路径
asset-dest:输出的asset资源目录
完整的打包命令如下:
react-native bundle --entry-file ReactComponent/index.js --bundle-output index.ios.bundle --platform ios --dev false --assets-dest ./
打包的过程中,要确保引用的图片资源存在,否则会报错
[15:33:49] <START> Building Dependency Graph[15:33:49] <START> Crawling File System[15:33:49] <START> find dependencies[15:33:53] <END> Crawling File System (3716ms)[15:33:53] <START> Building in-memory fs for JavaScript[15:33:53] <END> Building in-memory fs for JavaScript (161ms)[15:33:53] <START> Building in-memory fs for Assets[15:33:53] <END> Building in-memory fs for Assets (118ms)[15:33:53] <START> Building Haste Map[15:33:53] <START> Building (deprecated) Asset Map[15:33:53] <END> Building (deprecated) Asset Map (67ms)[15:33:53] <END> Building Haste Map (300ms)[15:33:53] <END> Building Dependency Graph (4305ms)/Users/jack/RN/node_modules/promise/lib/done.js:10 throw err; ^UnableToResolveError: Unable to resolve module image!tel from /Users/jack/RN/index.ios.js: Unable to find this module in its module map or any of the node_modules directories under /Users/node_modules/image!tel and its parent directoriesThis might be related to https://github.com/facebook/react-native/issues/4968To resolve try the following: 1. Clear watchman watches: `watchman watch-del-all`. 2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`. 3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`. at /Users/jack/RN/node_modules/node-haste/lib/DependencyGraph/ResolutionRequest.js:477:17
这样我们就可以在Native代码中直接使用我们的bundle文件了。
那么问题来了,一个简单的项目bundle文件就差不多500K,如果以后我们接入的业务更多的话,那bundle文件是不是更大了?
参考下携程的解决方案:React Native Bundle拆分
- 《React-Native系列》8、RN如何打离线包
- react-native 打离线包
- react-native打离线bundle包
- React Native 打离线包注意事项
- react-native 打离线包之iOS篇
- RN(react native)入坑指南-12,打正式签名包和发布
- 《React-Native系列》28、 RN之AsyncStorage
- 《React-Native系列》 RN学习之NodeJS
- 《React-Native系列》28、 RN之AsyncStorage
- 《React-Native系列》 RN学习之NodeJS
- 《React-Native系列》14、 RN学习之NodeJS
- 《React-Native系列》15、 RN之可触摸组件
- 《React-Native系列》16、 RN组件之ListView
- 《React-Native系列》18、 RN之定时器Timer
- 《React-Native系列》20、 RN数据流之Flux概览
- 《React-Native系列》29、 RN组件之WebView
- 《React-Native系列》30、 RN组件间通信
- RN学习系列---Windows下安装搭建React-Native环境
- POJ 3746 Cyclic Nacklace(KMP)
- uva562 Dividing coins(背包)
- CTR预估算法小结
- HTML源码DOM的offsetLeft,Left,clientLeft区别是什么样的?如何理解?
- 大数据DTSpark"蘑菇云"行动之 第三课:IDE开发第一个Scala程序
- 《React-Native系列》8、RN如何打离线包
- eclipse中的easy explore插件,提高开发效率
- java移位操作<<,>>,>>>
- java代码模型3(继承和覆写)
- [Android] 本地视频文件的缩略图实现方案
- Android Studio 识别不到 genymotion device
- HDU 5805 NanoApe Loves Sequence(水模拟)
- 二叉树遍历
- 速度的解决事情,热情为了好效果, 去做那种效果好的事件。