Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android React Native加載圖片資源的正確姿勢

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

編輯:關於Android編程

在這篇文章中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,相信不久的將來,這些問題都會被一一修復。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved