ReactNative Android 實現加載本地圖片

ReactNative Android 實現加載本地圖
ReactNative裏面js代碼一般都是android和ios通用的，那麼加載本地圖片對於android來說也是個問題。

先來看看官方對於加載本地圖片的支持
從0.14版本開始，React Native提供了一個統一的方式來管理iOS和Android應用中的圖片。要往App中添加一個靜態圖片，只需把圖片文件放在代碼文件夾中某處，然後像下面這樣去引用它：

<Image source={require('./my-icon.png')} />

那麼問題來了，有的時候靜態圖片是放到工程裏面的，那麼這種引用方式便不好了。這個時候回採用鏈接的方式，就是setUrl的方式來引用本地圖片。
ReactNative自帶了圖片加載框架Fresco，那麼新建一個View，繼承SimpleDraweeView

public class RNImage extends SimpleDraweeView {

    public RCTTBImage(Context context) {
        super(context);
    }

    public void setUrlPath(String url) {
        this.setImageURI(Uri.parse(url));
    }

}

這裏面在setUrlPath方法裏處理
例如我們如果自定義圖片鏈接爲：’localimage://[email protected]’
現將[email protected]這張圖片放到assets目錄下，如果你的ReactNative提成了一個model，那麼應該放在model下。注意文件名和鏈接中的名字必須一致。
然後就處理setUrlPath方法爲：

public void setUrlPath(String url) {

        if (TextUtils.isEmpty(url)) {
            return;
        }

        if (url.startsWith("localimage://")) {
            Uri uri_loacl_rn = Uri.parse("asset:///" + url.replaceAll("localimage://", ""));
            this.setImageURI(uri_loacl_rn);
            return;
        }

    }

這樣使用assets，就達成了ReactNative加載本地圖片的方法。