ReactNative - mian.jsbundle生成

我项目是ios原生集成了rn然后什么都完成了卡在了生成离线包这一个关上面,按照官方文档没能成功在网上也都是千篇一律的

curl http://localhost:8081/index.ios.bundle -o main.jsbundle生成main.jsbundle

方法而且都不怎么完整遇到问题也没回复我比如:

比如你需要先将项目运行起来打开服务器也就是cd到你的项目根目录执行 npm start命令,可是在用上面那个命令行压根没反应,
然后我试了下在新命令行窗口执行上面的main.jsbundle方法发现能生成但是你把main.jsbundle文件拖入到Xcode中点一下里面的内容message:“Cannot find entry file index.ios.js in any of the roots“xxxx”,和cannot get index.ios.js两种错误信息,
明明index.ios.js文件在,如果你的mian.jsbundle内容是上面的一种那么就是失败的.
那么怎么才能生成离线包呢,接下来我将把我自己生成离线包的经验传授给大家(下面是重点)
先上一张rn执行打包命令行参数含义

react-native bundle [参数]
  构建 js 离线包 
Options:
 -h, --help                   输出如何使用的信息
    --entry-file <path>          RN入口文件的路径, 绝对路径或相对路径
    --platform [string]          ios 或 andorid
--transformer [string]       Specify a custom transformer to be used
 --dev [boolean]              如果为false, 警告会不显示并且打出的包的大小会变小
  --prepack                    当通过时, 打包输出将使用Prepack格式化

 --bridge-config [string]     使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json
 --bundle-output <string>     打包后的文件输出目录, 例: /tmp/groups.bundle
--bundle-encoding [string]   打离线包的格式 可参考链接https://nodejs.org/api/buffer.html#buffer_buffer.
--sourcemap-output [string]  生成Source Map,但0.14之后不再自动生成source map,需要手动指定这个参数。例: /tmp/groups.map
--assets-dest [string]       打包时图片资源的存储路径
--verbose                    显示打包过程
 --reset-cache                移除缓存文件
--config [string]            命令行的配置文件路径

可以看一下,基本对参数都有注释,下面是实际打包步骤

cd到你ios和rn混编项目根目录中

执行

react-native bundle  --entry-file index.ios.js(你的index.ios.js路径) --bundle-output ./ios/根目录/index.ios.jsbundle(index.ios.jsbundle就是mian.jsbundle版本大与0.4的用这种)

备注:index.ios.js:就是你项目中index.ios.js的路径
index.ios.jsbundle:也是你项目根目录/index.ios.jsbundle,也就是index.ios.jsbundle放在哪里.(以前是main.jsbundle的0.4以上版本貌似编程index.ios.jsbundle了)
我这边没有需要图片资源,如果有图片的资源的可以根据上面的命令行参数在后面加上:

例子图片资源

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

最后将index.ios.bundle拖入xcode中点击看看内容是不是像下面这样子的这里写图片描述

如果是的话那么久可以了
最后修改一下啊你的appdelegate中的代码

  NSURL *jsCodeLocation;
//注释下面的    
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

   //本地生产jsbundle文件不许要连网
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];

    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"MyReactNativeApp"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    self.view = rootView;

完成.搞定,接下来就是ios打包了.打包还是和原生项目一样

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值