標籤:
靜態圖片資源
當React Native0.14版本發布的時候,它為iOS和Android應用提供了一個統一的管理圖片的方法。增加靜態圖片到你的app, 然後到你的源碼樹中引用它,如:
1 <Image source={require(‘./my-icon.png‘)} />
圖片的名稱問題的解決方案跟JS模組的解決方案一致。 在上面的例子中,packager將會請求它的組件的相同目錄中尋找my-icon.png。如果你同時有
my-icon.ios.png和
my-icon.android.png
, packager將會視你所啟動並執行平台來決定擷取哪一張圖片。
你也能使用@2x
, @3x等。
它們為不同的螢幕解析度提供圖片。 例如你有下面的檔案結構:
1 .2 ├── button.js3 └── img4 ├── [email protected]5 └── [email protected]
button.js
程式碼封裝含下面:
1 <Image source={require(‘./img/check.png‘)} />
Packager將會自動根據螢幕解析度匹配,例如,在iPhone 5s就會選擇[email protected]
, 在Nexus 5會選[email protected]。如果沒有圖片匹配這螢幕解析度,就會選擇最接近最好的。
一些益處:
- iOS 和 Android用相同的程式系統。
- 圖片和你的JS代碼在同一目錄,組件是自包含的。
- 沒有全域的命名空間,你不用擔心名字衝突。
- 只有真正使用的圖片才會打包進你的app。
- 添加或改變圖片不需要app重新編譯,只用在模擬器中正常操作就行。
- packager知道圖片的尺寸,不需要重複的代碼寫。
- 圖片能夠通過npm 包分發。
注意: 為了能夠正常工作,在require中的圖片名稱必須是靜態
1 // GOOD 2 <Image source={require(‘./my-icon.png‘)} /> 3 4 // BAD 5 var icon = this.props.active ? ‘my-icon-active‘ : ‘my-icon-inactive‘; 6 <Image source={require(‘./‘ + icon + ‘.png‘)} /> 7 8 // GOOD 9 var icon = this.props.active ? require(‘./my-icon-active.png‘) : require(‘./my-icon-inactive.png‘);10 <Image source={icon} />
React Native Image