Android React Native加載圖片資源的正確姿勢

在這篇文章中Android React Native的使用細節問題提到了 圖片使用的問題，也提到了無論用哪種方法都不能加載app內部的圖片資源的問題，當時的代碼是這樣子的

在官方文檔中也是這麼寫的Image

但是在另一個頁文檔中卻與其相矛盾的，Images，估計這頁文檔剛加入不久

也就是說正確的app內部圖片加載姿勢應該如下<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;">

當然圖片要存在res的drawable目錄下，記住uri對應的圖片名稱是不包含後綴的。這樣圖片能夠被正確加載並且顯示出來。

該文章中還提到加載靜態圖片資源（該方式還存在問題，加載不進來）

我在index.android.js同目錄下扔了一張名為icon.png的圖片，然後使用該方式加載

結果是圖片並沒有加載進來，但是也不報錯。姑且不理會它，反正目前版本還不穩定，等正式穩定下來再說。總之現在去學React Native就是一個填坑的過程。

再如果要加載手機存儲卡上的圖片資源，其方式也很簡單，假設我現在要加載sdcard根目錄下的icon.png。對應的代碼如下

可以看到使用了file://加上文件的路徑/sdcard/icon.png進行加載，當然你還需要加入對應的權限。這樣圖片就能正確加載了。

網絡圖片就不說了，之前那篇文章中就已經提到了

也就是說，目前為止就是靜態資源加載不了，這也是個bug，將來的某個版本肯定會修復的，臨時的解決方法見https://github.com/WoLfulus/react-native/commit/33e2d052b6e2e3e6b3595572abbc3cb9b66d5755

打開node_modules\react-native\Libraries\Image\resolveAssetSource.js文件，將

function getScaledAssetPath(asset) {
  var scale = pickScale(asset.scales, PixelRatio.get());
  var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
  var assetDir = getBasePath(asset);
  return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
}

修改為

function getScaledAssetPath(asset) {
  var scale = pickScale(asset.scales, PixelRatio.get());
  var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';
  var assetDir = getBasePath(asset);
  //return assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
   var imagePath = assetDir + '/' + asset.name + scaleSuffix + '.' + asset.type;
  if (imagePath[0] == "/" || imagePath[0] == "\\") {
      imagePath = imagePath.substr(1);
  }
  return imagePath;
}

這時候你再使用

就可以正常的加載並顯示靜態圖片資源的了。

文章寫作時，React Native Android的版本是0.14.2，開發環境為win 7 X64，相信不久的將來，這些問題都會被一一修復。