(申明: 此系列教程,轉(zhuǎn)載旋之華微信公眾號(hào),如有侵權(quán) . 通知?jiǎng)h除~)
(大家可以添加他的微信公眾號(hào)了解更多內(nèi)容.)
一、前言
在開(kāi)發(fā)中還有一個(gè)非常重要的組件Image，通過(guò)這個(gè)組件可以展示各種各樣的圖片幅狮，而且在React Native中該組件可以通過(guò)多種方式加載圖片資源。
二瓶埋、Image組件的基本用法
2.1 從當(dāng)前項(xiàng)目中加載圖片
<View style={styles.container}>
<Text style={styles.textMarginTop}>加載本地的圖片</Text>
<Image source={require('./img/2.png')} style={{width: 120, height: 120}} />
</View>
該圖片資源文件的查找和JS模塊相似篮愉，該會(huì)根據(jù)填寫(xiě)的圖片路徑相對(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)的文件溜族。
2.2 加載使用APP中的圖片
<View style={styles.container}>
<Text style={styles.textMarginTop}>加載Xcode中的圖片</Text>
<Image source={require('image!icon_homepage_map')} style={{width: 50,height:50}}/>
</View>
使用已經(jīng)打包在APP中的圖片資源(例如:xcode asset文件夾以及Android drawable文件夾)
2.3 加載來(lái)自網(wǎng)絡(luò)的圖片
客戶(hù)端的很多圖片資源基本上都是實(shí)時(shí)通過(guò)網(wǎng)絡(luò)進(jìn)行獲取的冗酿，寫(xiě)法和上面的加載本地資源圖片的方式不太一樣，
這邊一定需要指定圖片的尺寸大小
术健，實(shí)現(xiàn)如下：
<View style={styles.container}>
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.cover}}/>
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.contain}}/>
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>
</View>
細(xì)心的同學(xué)可能已經(jīng)注意到汹碱，我在上面用到了resizeMode這樣一個(gè)屬性，那么這個(gè)屬性的作用相當(dāng)于OC中設(shè)置圖片的內(nèi)容模式荞估。
Image.resizeMode.cover：圖片居中顯示咳促，沒(méi)有被拉伸，超出部分被截?cái)啵?/strong>
Image.resizeMode.contain：容器完全容納圖片勘伺，圖片等比例進(jìn)拉伸跪腹；
Image.resizeMode.stretch： 圖片被拉伸適應(yīng)容器大小，有可能會(huì)發(fā)生變形飞醉。
2.4 設(shè)置圖片為背景
<Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>
<Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景圖片</Text>
</Image>
運(yùn)行的效果：
三冲茸、Image組件的常見(jiàn)屬性
3.1 屬性方法
**onLayout(function)**
當(dāng)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)圖片開(kāi)始加載的時(shí)候調(diào)用該方法
**resizeMode**
縮放比例,可選參數(shù)('cover', 'contain', 'stretch') 該當(dāng)圖片的尺寸超過(guò)布局的尺寸的時(shí)候钦无，會(huì)根據(jù)設(shè)置Mode進(jìn)行縮放或者裁剪圖片
source{uri:string}
進(jìn)行標(biāo)記圖片的引用逗栽，該參數(shù)可以為一個(gè)網(wǎng)絡(luò)url地址或者一個(gè)本地的路徑
3.2 樣式風(fēng)格屬性
FlexBox 支持彈性盒子風(fēng)格
Transforms 支持屬性動(dòng)畫(huà)
backgroundColor 背景顏色
borderColor 邊框顏色
borderWidth 邊框?qū)挾?/p>
borderRadius 邊框圓角
overflow 設(shè)置圖片尺寸超過(guò)容器可以設(shè)置顯示或者隱藏('visible','hidden')
tintColor 顏色設(shè)置
opacity 設(shè)置不透明度0.0(透明)-1.0(完全不透明)
** 四、Image組件的小練習(xí)**
通過(guò)一款包包的展示失暂，總結(jié)前面所學(xué)的View彼宠，Text和今天的Image組件鳄虱，具體代碼如下:
運(yùn)行效果如下：
