1.基础知识
- react native bundle包生成命令:
react-native bundle --entry-file index.js --bundle-output ./bundle/index.android.jsbundle --platform android --assets-dest ./bundle --dev false
//entry-file JS文件的路径
//bundle-output JSbundle文件的生成目录
//platform 平台 Android或iOS
//assets-dest 资源文件的生成目录
//dev 开发模式
-
资源文件的拷贝生成：
android:资源文件会被拷贝生成到drawable文件夹下，它的文件路径会变成目录名+下划线的格式来命名原文件。如src/assets/ABCD.png会变成src_assets_ABCD.png。
Android资源文件命名
iOS:资源文件会被拷贝生成到assets文件夹下，而资源文件则会保存原有的文件路径。如src/assets/ABCD.png bundle之后，会生成为assets/src/assets/ABCD.png
3.react native中引用资源的方式：
比如图片组件加载图片或者Web组件加载HTML文件，一般是使用require命令加载对应资源的相对路径。
2.RN的资源打包机制
rn中打包的脚本代码在react-native/local-cli/bundle这个文件夹中，打包的逻辑代码再buildBundle.js这个文件中。从这个方法入手，一步一步跟踪可以发现。最终依赖的是metro这个Facebook专为RN打包的打包工具(https://github.com/facebook/metro)。(旧版RN代码中是使用的内置的Packager，这里用facebook最新的RN代码和metro代码分析)
RN中引用的资源文件会被解析成模块依赖，在node-haste（Facebook出的静态资源管理包https://www.npmjs.com/package/node-haste）解析到这些资源后，会转换成资源模块AssetModule。具体步骤如下：
首先通过查找资源匹配来判断是否是资源模块，默认的资源文件后缀在defaults.js文件中。有图片，视频，音频等等文件格式。
然后通过metro中一系列方法调用，最终调用到Assets文件中的getAssetData方法，生成资源模块。
现在可以用我们之前打好的jsbundle文件，查看一下打好的资源模块是什么样的：
3.RN的资源加载机制
以图片资源的加载为例，通过断点可以看出获取资源从最初的require方法为入口，后来是通过AssetRegistry.js这个类，来注册和获取图片资源数据。通过一个数组来维护项目中所使用的本地图片资源。
//封装的图片资源数据
export type PackagerAsset = {
+__packager_asset: boolean,
+fileSystemLocation: string,
+httpServerLocation: string,
+width: ?number,
+height: ?number,
+scales: Array<number>,
+hash: string,
+name: string,
+type: string,
};
const assets: Array<PackagerAsset> = [];
//注册图片资源
function registerAsset(asset: PackagerAsset): number {
// `push` returns new array length, so the first asset will
// get id 1 (not 0) to make the value truthy
return assets.push(asset);
}
//通过ID获取图片资源
function getAssetByID(assetId: number): PackagerAsset {
return assets[assetId - 1];
}
图片资源数据中是资源的相对路径，在图片组件中并不是能直接使用的Uri。在这之间有一次资源的解析。查找图片组件的源码Image.ios.js或Image.android.js，发现都通过resolveAssetSouce方法处理了。最终在defaultAsset方法中能清楚的看到图片加载可以分为来自网络，资源或是本地文件系统中。
function resolveAssetSource(source: any): ?ResolvedAssetSource {
if (typeof source === 'object') {//加载{uri:XXXX}这种网络资源
return source;
}
const asset = AssetRegistry.getAssetByID(source);//获取资源ID
if (!asset) {
return null;
}
const resolver = new AssetSourceResolver(
getDevServerURL(),
getScriptURL(),
asset,
);
if (_customSourceTransformer) {//自定义资源解析
return _customSourceTransformer(resolver);
}
return resolver.defaultAsset();//默认资源解析方法
}
//AssetSourceResolver.js
class AssetSourceResolver {
serverUrl: ?string;
// where the jsbundle is being run from
jsbundleUrl: ?string;
// the asset to resolve
asset: PackagerAsset;
constructor(serverUrl: ?string, jsbundleUrl: ?string, asset: PackagerAsset) {
this.serverUrl = serverUrl;
this.jsbundleUrl = jsbundleUrl;
this.asset = asset;
}
isLoadedFromServer(): boolean {
return !!this.serverUrl;
}
isLoadedFromFileSystem(): boolean {
return !!(this.jsbundleUrl && this.jsbundleUrl.startsWith('file://'));
}
defaultAsset(): ResolvedAssetSource {
if (this.isLoadedFromServer()) {//加载来自网络的资源，jsbundle资源来自网络，例如debug模式
return this.assetServerURL();
}
if (Platform.OS === 'android') {
return this.isLoadedFromFileSystem()//加载来自文件系统的资源
? this.drawableFolderInBundle()
: this.resourceIdentifierWithoutScale();//加载来自Asset资源中的文件
} else {
return this.scaledAssetURLNearBundle();
}
}
