(
問渠那得清如許，為有源頭活水來养渴。雙手奉上RN官網(wǎng))
Images 圖片
- 靜態(tài)圖片: 可以使用如
<Image source={require('./myIcon.png')} />的方式獲取- 加載圖片的路徑相對與代碼所在的文件
- 如果你提供了myIcon.ios.png,myIcon.android.png.系統(tǒng)會自動根據(jù)平臺來獲取相應(yīng)的圖片.
- 如果提供了myIcon@2x.png,myIcon@3x.png. 系統(tǒng)會根據(jù)屏幕分辨率自動獲取適當(dāng)?shù)膱D片,如果沒有則用相對最適合的圖片.
- 只有真正使用到的圖片才會被打包進(jìn)去.
- require里圖片的路徑應(yīng)該是靜態(tài)的路徑,而不是運行時拼湊,盡管拼湊也可用
- 圖片信息中包含了圖片的尺寸,如果想動態(tài)縮放,需要手動在style中聲明
{ width: undefined, height: undefined }
-
在混合開發(fā)時獲取原生項目中的圖片:可以使用
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />- 你需要保證圖片確實可用且聲明其尺寸
-
網(wǎng)絡(luò)圖片:可以使用
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />獲取- 必須聲明圖片的尺寸,意在更好的用戶體驗
- 應(yīng)用本地文件系統(tǒng)(相冊等)中的圖片
- RN會自動選擇合適分辨率的圖片
- 可以通過在Image中嵌套子元素來使其作為背景圖片使用
