一. 簡(jiǎn)介
一個(gè)用于顯示多種不同類型圖片的React組件尝盼，包括網(wǎng)絡(luò)圖片吞滞、靜態(tài)資源、臨時(shí)的本地圖片盾沫、以及本地磁盤上的圖片（如相冊(cè)）等裁赠。
從0.14版本開(kāi)始，React Native提供了一個(gè)統(tǒng)一的方式來(lái)管理iOS和Android應(yīng)用中的圖片赴精。要往App中添加一個(gè)靜態(tài)圖片佩捞，只需把圖片文件放在代碼文件夾比如img中某處，然后像下面這樣去引用它：
<Image source={require('./img/check.png')} />
如果你有my-icon.ios.png和my-icon.android.png蕾哟，Packager就會(huì)根據(jù)平臺(tái)而選擇不同的文件一忱。
你還可以使用@2x莲蜘，@3x這樣的文件名后綴，來(lái)為不同的屏幕精度提供圖片帘营。比如下面這樣的代碼結(jié)構(gòu)：
------ button.js
------ img
------ |-------- check@2x.png
------ |-------- check@3x.p
Packager會(huì)打包所有的圖片并且依據(jù)屏幕精度提供對(duì)應(yīng)的資源票渠。譬如說(shuō)，iPhone 5s會(huì)使用check@2x.png芬迄，而Nexus 5上則會(huì)使用check@3x.png庄新。如果沒(méi)有圖片恰好滿足屏幕分辨率，則會(huì)自動(dòng)選中最接近的一個(gè)圖片薯鼠。
【注意】如果你添加圖片的時(shí)候packager正在運(yùn)行择诈，可能需要重啟packager以便能正確引入新添加的圖片。為了使新的圖片資源機(jī)制正常工作出皇，require中的圖片名字必須是一個(gè)靜態(tài)字符串,不能在require中進(jìn)行拼接羞芍。
//正確
<Image source={require('./my-icon.png')} />
錯(cuò)誤
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />
使用混合App的圖片資源
如果你在編寫一個(gè)混合App（一部分UI使用React Native，而另一部分使用平臺(tái)原生代碼）郊艘，也可以使用已經(jīng)打包到App中的圖片資源（通過(guò)Xcode的asset類目或者Android的drawable文件夾打包）：
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
注意：這一做法并沒(méi)有任何安全檢查荷科。你需要自己確保圖片在應(yīng)用中確實(shí)存在，而且還需要指定尺寸纱注。
加載網(wǎng)絡(luò)圖片
與靜態(tài)資源不同的是畏浆，你需要手動(dòng)指定圖片的尺寸。
//正確
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
//錯(cuò)誤
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} />
為什么不在所有情況下都指定尺寸呢
在瀏覽器中狞贱，如果你不給圖片指定尺寸刻获，那么瀏覽器會(huì)首先渲染一個(gè)0x0大小的元素占位，然后下載圖片瞎嬉，在下載完成后再基于正確的尺寸來(lái)渲染圖片蝎毡。這樣做的最大問(wèn)題是UI會(huì)在圖片加載的過(guò)程中上下跳動(dòng)，使得用戶體驗(yàn)非常糟糕氧枣。
在React Native中有意避免了這一行為沐兵。如此一來(lái)開(kāi)發(fā)者就需要做更多工作來(lái)提前知曉遠(yuǎn)程圖片的尺寸（或?qū)捀弑龋覀兿嘈胚@樣可以帶來(lái)更好的用戶體驗(yàn)便监。然而扎谎，從已經(jīng)打包好的應(yīng)用資源文件中讀取圖片（使用require('image!x')語(yǔ)法）則無(wú)需指定尺寸，因?yàn)樗鼈兊某叽缭诩虞d時(shí)就可以立刻知道烧董。
比如這樣一個(gè)引用require('image!logo')的實(shí)際輸出結(jié)果可能是：
{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}
通過(guò)嵌套實(shí)現(xiàn)背景圖片
類似web中的背景圖（background-image）毁靶，只需簡(jiǎn)單地創(chuàng)建一個(gè)<Image>組件，然后把需要背景圖的子組件嵌入其中即可
return ( <Image source={...}> <Text>Inside</Text> </Image> );
在Android 上支持GIF和WebP格式的圖片
dependencies {
// 如果你需要支持Android4.0(API level 14)之前的版本
compile 'com.facebook.fresco:animated-base-support:0.11.0'
// 如果你需要支持GIF動(dòng)圖
compile 'com.facebook.fresco:animated-gif:0.11.0'
// 如果你需要支持WebP格式解藻，包括WebP動(dòng)圖
compile 'com.facebook.fresco:animated-webp:0.11.0'
compile 'com.facebook.fresco:webpsupport:0.11.0'
// 如果只需要支持WebP格式而不需要?jiǎng)訄D
compile 'com.facebook.fresco:webpsupport:0.11.0'
}
如果你在使用GIF的同時(shí)還使用了ProGuard老充，那么需要在proguard-rules.pro中添加如下規(guī)則 :
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }
二. 屬性
1.onLayout (function) 當(dāng)Image布局發(fā)生改變的葡盗，會(huì)進(jìn)行調(diào)用該方法螟左，調(diào)用的代碼為:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):當(dāng)圖片加載成功之后啡浊，回調(diào)該方法
3.onLoadEnd (function):當(dāng)圖片加載失敗回調(diào)該方法，不會(huì)管圖片加載成功還是失敗
4.onLoadStart (fcuntion):當(dāng)圖片開(kāi)始加載的時(shí)候調(diào)用該方法
5.resizeMode 縮放比例,可選參數(shù)('cover', 'contain', 'stretch') 當(dāng)圖片的尺寸超過(guò)布局的尺寸的時(shí)候胶背，會(huì)根據(jù)設(shè)置Mode進(jìn)行縮放或者裁剪圖片
cover: 在保持圖片寬高比的前提下縮放圖片巷嚣，直到寬度和高度都大于等于容器視圖的尺寸（如果容器有padding內(nèi)襯的話，則相應(yīng)減去）钳吟。譯注：這樣圖片完全覆蓋甚至超出容器廷粒，容器中不留任何空白。
contain: 在保持圖片寬高比的前提下縮放圖片红且，直到寬度和高度都小于等于容器視圖的尺寸（如果容器有padding內(nèi)襯的話坝茎，則相應(yīng)減去）。譯注：這樣圖片完全被包裹在容器中暇番，容器中可能留有空白
stretch: 拉伸圖片且不維持寬高比嗤放，直到寬高都剛好填滿容器。
repeat: 重復(fù)平鋪圖片直到填滿容器壁酬。圖片會(huì)維持原始尺寸次酌。僅iOS可用。
center: 居中不拉伸舆乔。
6.source {uri:string} 進(jìn)行標(biāo)記圖片的引用岳服，該參數(shù)可以為一個(gè)網(wǎng)絡(luò)url地址或者一個(gè)本地(使用require(相對(duì)路徑)來(lái)引用)的路徑
三. 樣式風(fēng)格
1.FlexBox 支持彈性盒子風(fēng)格
2.Transforms 支持屬性動(dòng)畫 3.resizeMode 設(shè)置縮放模式
4.backgroundColor 背景顏色
5.borderColor 邊框顏色 6.borderWidth 邊框?qū)挾?br>
7.borderRadius 邊框圓角
8.overflow 設(shè)置圖片尺寸超過(guò)容器可以設(shè)置顯示或者隱藏('visible','hidden')
9.tintColor 顏色設(shè)置 10.opacity 設(shè)置不透明度0.0(透明)-1.0(完全不透明)
四. 示例
加載網(wǎng)路圖片的例子
class MyImageDemo extends Component { render() { return ( <View style={[styles.flex,{marginTop:45}]}> <MyImage imgs={imgs}> </MyImage> </View> ); } }
class MyImage extends Component { constructor(props) { super(props); this.state = { count: 0,//圖片索引 imgs: this.props.imgs, }; }
render() { return ( <View style={[styles.flex,{alignItems:'center'}]}> <View style={styles.image}> <Image style={styles.img} resizeMode='contain' source={{uri:this.state.imgs[this.state.count]}}/> </View> <View style={styles.btns}> <TouchableOpacity onPress={this.onPrevious.bind(this)}><View style={styles.btn}><Text>上一張</Text></View></TouchableOpacity>
<TouchableOpacity onPress={this.onNext.bind(this)}><View style={styles.btn}><Text>下一張</Text></View></TouchableOpacity> </View> </View> ); }
onPrevious() { var count = this.state.count; count--; if (count >= 0) { this.setState({ count: count, }); } } onNext() { var count = this.state.count; count++; if (count < this.state.imgs.length) { this.setState({ count: count, }); } } }
const styles = StyleSheet.create({ flex: { flex: 1, }, image: { width: 300, height: 200, borderWidth: 1, justifyContent: 'center', alignItems: 'center', borderColor: '#ccc', borderRadius: 5, }, img: { width: 200, height: 150, }, btn: { width: 60, height: 35, borderWidth: 1, borderColor: '#ccc', borderRadius: 3, justifyContent: 'center', alignItems: 'center', marginRight: 30, }, btns: { flexDirection: 'row', marginTop: 20, justifyContent: 'center' } } );
效果
點(diǎn)擊下一張
點(diǎn)擊下一張
記錄我自己的RN學(xué)習(xí)之路，純屬自己增值希俩，有什么不對(duì)的地方吊宋，一起討論進(jìn)步
