一、Native本地加载流程
1.1、React应用打包
- 1、导出
.jsbundle包和图片资源
// 根项目下，即index.js所在文件夹
mkdir out
cd out
mkdir ios
mkdir android
// iOS
npx react-native bundle --entry-file index.js --bundle-output ./out/ios/index.ios.bundle --platform ios --assets-dest ./out/ios --dev false
// android
npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output ./out/android/index.android.bundle --assets-dest ./out/android
生成.jsbundle（js部分的代码） 和 assets 文件夹 （项目所用到的资源）
2、将
.jsbundle和assets 文件夹导入项目Native工程。
注意导入assets文件夹的时候，options选择Create folder refrences，否则RN应用会应用不到资源。3、Native加载（iOS为例）
NSURL *url = [[NSBundle mainBundle] URLForResource:@"index.ios.bundle" withExtension:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:url moduleName:@"HelloFirstRNDemo" initialProperties:nil launchOptions:nil];
1.2、react-native的命令详解
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] 命令行的配置文件路径
--bundle-output bundle文件输出路径
--assets-dest 静态资源文件输出路径
1.3、关于metro
metro是一种支持ReactNative的打包工具，也可以基于它来进行拆包的。
react-native metro 分析
- 加载包提示
Connect to Metro to develop JavaScript
