ReactNative系列之二十五加载Image之深度分析

1.使用metro bundle 打包bundle时将图片资源进行注册，其中包括如下信息：

__d(function(e,
a,
t,
s){
    t.exports=a(146).registerAsset({
        __packager_asset: !0,
        httpServerLocation: "/assets/dolphin/app/img/avatar_group",
        width: 160,
        height: 160,
        scales: [
            1
        ],
        hash: "04895f12bae1ef851b893ef5705e3801",
        name: "group0",
        type: "png"
    })
},
10904);

2.应用启动加载bundle后会调用AssetRegistry.registerAsset，将所有图片资源放入一个格式为PackagerAsset的Array中

3.当进入ReactNative页面进行渲染时，js的view都会调用到requireNativeComponent.js 获取viewConfig。此类中不仅获取到了从原生注册的“行为属性”（如ScrollView的onScroll），还有通过调用resolveAssetSource.js根据传入的source(此为一个int值),来获取图片的具体位置，交由原生具体渲染。从Array中获取图片资源信息的具体方法为AssetRegistry.getAssetByID方法。获取的路径uri有三种情况，当然都是根据bundle的加载位置信息相应图片位置的获取，路径一为http路径，为局域网电脑Debug模式；路径二为Assets目录；路径三为Files目录，这个是Android平台下可操作下文件夹，如动态升级后的路径。

4.在Android平台，ReactNative渲染图片的实现主要包括两部分，一部分为由Fresco实现的，另一个部为Android原生的Image组件。前者在ReactNative中主要应用于富文本的实现（Image和Text混合渲染），后者为普通的Image渲染

如果想了解ReactNative更多深层次的原创技术文档，请关注哦~~~