Android React Native載入圖片資源的正確姿勢
阿新 • • 發佈:2019-02-01
在這篇文章中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,相信不久的將來,這些問題都會被一一修復。