首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >React Native bundle打离线包

React Native bundle打离线包

原创
作者头像
conanma
修改2022-03-09 19:32:45
修改2022-03-09 19:32:45
3K00
代码可运行
举报
文章被收录于专栏:正则正则
运行总次数:0
代码可运行

react-native-cli 自带脚本可以打包 react-native bundle 命令

以下是命令的参数说明:

react-native bundle

  • –entry-file ,ios或者android入口的js名称
  • –platform ,平台名称(ios或者android)
  • –dev ,设置为false的时候将会对JavaScript代码进行优化处理
  • –bundle-output, 生成的jsbundle文件的名称,比如./ios/index.ios.jsbundle
  • –assets-dest 图片以及其他资源存放的目录,比如./ios 默认会生成一个新的文件夹assets
如果打ios的bundle 用以下命令
代码语言:javascript
代码运行次数:0
运行
复制
react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios --assets-dest ./ios --dev false

如果打Android的bundle 用以下命令 跟iOS差不多,把变量换成android

代码语言:javascript
代码运行次数:0
运行
复制
react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res --dev false

利用npm的脚本也可以实现当前的效果,在package.json中添加如下:

代码语言:javascript
代码运行次数:0
运行
复制
"scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start",

    "bundle-ios": "react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios --assets-dest ./ios --dev false",

    "bundle-android": "react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.bundle --platform android --assets-dest ./android/app/src/main/res --dev false"

以后每次打包直接运行:

代码语言:javascript
代码运行次数:0
运行
复制
npm run bundle-ios
npm run bundle-android

打包好的资源添加到xcode项目。

到具体的rn控制器中,采用bundle的方式集成 main和打出来的bundle前面的名称对应

代码语言:javascript
代码运行次数:0
运行
复制
//  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
作者已关闭评论
0 条评论
热度
最新
推荐阅读
目录
  • react-native bundle
    • 如果打ios的bundle 用以下命令
  • 打包好的资源添加到xcode项目。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档