学习笔记：RN-打包和动态化加载

一、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

二、动态化部署

基于ReactNative实现动态加载