React Native for Android thermal deployment picture Define your own scenario

Scenario

When it comes to hot deployment, we expect the upgrade package to include JS code and picture resources.

Bundles of hot deployment online already have two scenarios, one is to use reflection, one is the use of RN self-band function. When the bundle is initialized, it is placed directly under the specified folder, followed by the replacement bundle file for code hot deployment.

We want the image to be able to be thermally deployed, and here's a simpler solution.

Detailed requirements: Client resolution from the server issued by the compressed package (Zip), including JS source files Index.android.bundle and picture package, after decompression reactnative point After decompression index.android.bundle in the JS code, JS code used in the image resource point

Extract the image resources. (in data/data/files/or sdcard)

Client based on the execution of the scene debug or release to determine from the server or local decompression folder to obtain the picture resources, that is, a URL compatible in different scenarios to access different resources.

Image using Demo sample

1. Request a picture of react native server <image source={require ('./image/help.png ')} STYLE={STYLES.HELPIMAGE}/>//2. Request a picture of the network <image Source={uri: ' Http://xxxxxx/image/help.png '} style={styles.helpimage}/>//3. Request Native Pictures < Image source={{uri: ' Help '}} STYLE={STYLES.HELPIMAGE}/>//4. Request the phone to specify a path picture <image Source={{uri: ' File:///sdcard/help.png '}}

Both of the above will send network requests

Expected: When the local development, the picture from 1, on-line, the picture from 4. In order for the two to conform in code form

you need to define your own protocol: Http-cage://xxx/xxx.png in a similar way, you get pictures of different paths in different environments.

Image Load resource mechanism

Related classes:

Js:RCTImage.js, Assetregistry.js,resolveassetsource.js,image.android.js,assetregistry.js

Native:ReactImageView.java

Call Order Relationship:

1: Traverse the test using external resources (for example, pictures on Rnserver). Detected a call to Assetregistry

2:assetregistry.registerasset

Adds the resource to the Assetregistry assets array, returning the ID, which is the index value of the resource in assets.

3 detection to <image tag trigger Image.android.js render

4:resolveassetsource.resolveassetsource (source)

Source may be of type object and encapsulates the image URL. or the number type. That is, the resource Id,id value is determined by step 2.

5: Inferred Resource type

Object: Non-local resource (network, SDcard, apk in picture) Jump 6

Number: Resource ID (rnserver) Jump 7

6:return Object Jump 10

7: Remove resource asset from Assetregistry's assets based on ID.

var asset = Assetregistry.getassetbyid (source);

8: Stitching Resource Path

1. Get Rnserver Address

  var devserverurl = Getdevserverurl (); Gets the RN server address. It's usually http://localhost:8081/.

2. Take the server address and stitch it to the path in the asset according to the address. "http://localhost:8081/assets/image/open.png? "

platform=android&hash=ff54b39af9b07e7380a4eda7e0212643 "

3. Without the server address, obtain the address getpathinarchive from the compressed package.

Address returned. 9

9: Build according to URL and 6 similar object

function Assettoimagesource (Asset): Resolvedassetsource {  var devserverurl = Getdevserverurl ();  return {    __packager_asset:true,    width:asset.width,    height:asset.height,    uri:devserverurl? Getpathondevserver (Devserverurl, asset): getpathinarchive (Asset),    Scale:pickscale (Asset.scales, Pixelratio.get ()),  };}

10:image.android.js received object, merged with Nativeprops,

var nativeprops = Merge (This.props, {        style,        Src:source.uri,      });

11: Merged Nativeprops incoming rctimage

12:rctimage parsing nativeprops The URI to the Java Reactimageview.java SetSource

protocols define their own scenarios

A protocol inference is made between 11 and 12. Change Image.android.js files and resolveassetsource.js.

Image.android.js  render:function () {... var prefix = ' http-cage://';          var match = nativeProps.src.indexOf (prefix);          if (match = = 0) {//start with http-cage://             Console.log (__dev__);             var realurl = nativeProps.src.substring (prefix.length,nativeprops.src.length);             if (Debug) {//debug case  RN server:http://10.0.3.5:8081/assets/image/help.png                 nativeprops.src = Resolveassetsource.getdevserverurl () +realurl;             } else {//release case picture path: file:///sdcard/image/help.png                 nativeprops.src = ' file://' + '/sdcard/' +realurl;             }}}

Resolveassetsource.js//Make getdevserverurl externally available Module.exports.getDevServerURL = Getdevserverurl;

define your own protocol using demo sample

Test version number 0.13.2 <image Source={{uri: ' http-cage://image/finance.png '}} style={styles.phoneimage}/>

0.14 the starting picture is placed under the root folder img file and is require in JS, it will be entered into the bundle. Compression ratio is very exaggerated, do not know what compression algorithm used.

<image Source={require ('./img/help.png ')} style={styles.helpimage}/>

Postscript

Verified by colleagues, the IMG directory image is hit in the apk res, before misleading everyone, sorry

React Native for Android thermal deployment picture Define your own scenario