1、在ios目录下创建bundle文件夹

2、在bundle目录下创建assets文件夹，assets是图片以及其他资源存放的目录

3、终端进入到项目的根目录下，运行以下命令：

  1. react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle
  • index.js：ios或者android入口的js名称
  • platform ,平台名称(ios或者android)
  • dev ,设置为false的时候将会对JavaScript代码进行优化处理
  • bundle-output, 生成的jsbundle文件的名称，比如./ios/bundle/index.ios.jsbundle
  • 更新jsbundle文件。

4、将bundle添加进工程，添加时必须使用Create folder references的方式添加文件夹，添加到工程后的文件夹必须是蓝色的。如下图所示：

 

5、在原生工程调用rn的地方，需作调整

之前代码为：

1

2

3

NSURL *jsCodeLocation;

jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SinaLeJuB" initialProperties:nil launchOptions:nil];

更改后代码为：

1

2

3

NSURL *jsCodeLocation;

jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];

rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"SinaLeJuB" initialProperties:nil launchOptions:nil];
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony 实战：疯狂头像 App（二）— 层叠背景与极致玻璃拟态 (Glassmorphism)

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 实战：疯狂头像 App（三）— 复合动画与交互反馈 — 让 UI 跃动起来

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 实战：疯狂头像 App（四）— 通义万相 AIGC 联调与相册持久化实战

avatar 开源鸿蒙跨平台开发者社区