一查坪、前言
在開發(fā)中還有一個(gè)非常重要的組件Image偿曙，通過這個(gè)組件可以展示各種各樣的圖片望忆，而且在React Native中該組件可以通過多種方式加載圖片資源启摄。
二歉备、Image組件的基本用法
-
從當(dāng)前項(xiàng)目中加載圖片
<Image source={require('./img/01.png')} style={{width: 120, height: 120}} />
該圖片資源文件的查找和JS模塊相似威创，該會(huì)根據(jù)填寫的圖片路徑相對(duì)于當(dāng)前的js文件路徑進(jìn)行搜索。
此外，React Naive的Packager會(huì)根據(jù)平臺(tái)選擇相應(yīng)的文件吸申，例如:my_icon.ios.png和my_icon.android.png兩個(gè)文件(命名方式android或者ios)截碴，會(huì)分別根據(jù)android或者ios平臺(tái)選擇相應(yīng)的文件日丹。
-
加載使用APP中的圖片
<Image source={require('image!icon_homepage_map')} style={{width: 50,height:50}}/>
使用已經(jīng)打包在APP中的圖片資源(例如:xcode asset文件夾以及Android drawable文件夾)
-
加載來自網(wǎng)絡(luò)的圖片
客戶端的很多圖片資源基本上都是實(shí)時(shí)通過網(wǎng)絡(luò)進(jìn)行獲取的哲虾，寫法和上面的加載本地資源圖片的方式不太一樣束凑，這邊一定需要指定圖片的尺寸大小汪诉，實(shí)現(xiàn)如下：
<Image
source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}
style={{flex:1,width:200, height:100, resizeMode:cover}}
/>
- 圖片拉伸模式resizeMode：
cover：圖片居中顯示扒寄，沒有被拉伸该编，超出部分被截?cái)啵?br> contain：容器完全容納圖片上渴，圖片等比例進(jìn)拉伸；
**stretch： **圖片被拉伸適應(yīng)容器大小曹阔，有可能會(huì)發(fā)生變形赃份。
三抓韩、Image組件的常見屬性
-
onLayout (function)：Image布局發(fā)生改變的谒拴，會(huì)進(jìn)行調(diào)用該方法英上，調(diào)用的代碼為:
{nativeEvent: {layout: {x, y, width, height}}} - onLoad (function)：當(dāng)圖片加載成功之后苍日，回調(diào)該方法
- onLoadEnd (function)：當(dāng)圖片加載失敗回調(diào)該方法相恃，該不會(huì)管圖片加載成功還是失敗
- onLoadStart (fcuntion)：當(dāng)圖片開始加載的時(shí)候調(diào)用該方法
-
resizeMode (string)：縮放比例,可選參數(shù)
('cover', 'contain', 'stretch')該當(dāng)圖片的尺寸超過布局的尺寸的時(shí)候，會(huì)根據(jù)設(shè)置Mode進(jìn)行縮放或者裁剪圖片 - source{uri:string}：進(jìn)行標(biāo)記圖片的引用屋摇，該參數(shù)可以為一個(gè)網(wǎng)絡(luò)url地址或者一個(gè)本地的路徑
四火脉、樣式風(fēng)格屬性
- FlexBox 支持彈性盒子風(fēng)格
- Transforms 支持屬性動(dòng)畫
- backgroundColor 背景顏色
- borderColor 邊框顏色
- borderWidth 邊框?qū)挾?/li>
- borderRadius 邊框圓角
- overflow 設(shè)置圖片尺寸超過容器可以設(shè)置顯示或者隱藏('visible','hidden')
- tintColor 顏色設(shè)置
- opacity 設(shè)置不透明度0.0(透明)-1.0(完全不透明)
