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

 <Image source={ require('image!icon') } />

• 1

• 1

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

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

也就是說正確的app內部圖片載入姿勢應該如下

<Image style={{width:100,height:100}} source={{uri:'icon'}} />

• 1

• 1

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

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

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

<Image style={{width:100,height:100}} source={require('./icon.png')}/>

• 1

• 1

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

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

  <Image
 
 style={{width:100,height:100}} source={{uri:'file:///sdcard/icon.png'}} />

• 1

• 1

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

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

  <Image style={{width:100,height:100}} source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} />

• 1

• 1

開啟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;
}

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

修改為

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;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

這時候你再使用

<Image style={{width:100,height:100}} source={require('./icon.png')}/>

• 1

• 1

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

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