#
#
轉載請標明出處:
[http://blog.csdn.net/developer_jiangqq/article/details/50557632](http://blog.csdn.net/developer_jiangqq/article/details/50557632)
本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq)
# (一)前言
? ? ? ??【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新,請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?
? ? ? 今天我們一起來看一下Image組件的相關使用講解以及模仿實現一下美團首頁頂部分類的效果。具體環境搭建以及相關配置的請查看之前的相關文章。
???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送!
???????? Image是一個現實多種不同類型圖片的React組件,可以進行加載網絡圖片,本地資源圖片,打包的APP中的圖片資源,以及磁盤例如:相冊中的圖片。
# (二)Image基本用法
???????? 2.1.加載項目資源圖片
從0.14版本開始react native支持加載我們項目目錄中的圖片資源,我現在在測試項目中創建一個img目錄,在里邊加入my_icon.png圖片.,那么可以通過以下方式進行訪問:
~~~
<View style={{marginLeft:10,marginTop:10}}>
<Text style={{fontSize:16}}>'測試本地圖片'</Text>
<Image source={require('./img/my_icon.png')} />
</View>
~~~
運行結果如下:

???????? 該圖片資源文件的查找和JS模塊相似,該會根據填寫的圖片路徑相對于當前的js文件路徑進行搜索。RN更加好的是Packager會根據平臺選擇相應的文件,例如:my_icon.ios.png和my_icon.android.png兩個文件(命名方式android或者ios)。該會根據android或者ios平臺選擇相應的文件。
??????? 對于iOS開發來講,大家肯定會知道我們經常可以設置@2X,@2X等格式的圖片來進行適配手機屏幕,例如:my_icon@2x.png或者my_icon@3x.png。這樣的話Packager進行打包的時候會根據屏幕的不同密度進行選擇顯示對應的圖片。如果沒有恰好的滿足當前屏幕的分辨率,那么會選擇最接近的那個圖片資源。
???????? [注意].這邊使用Image組件,require中的圖片名稱必須為一個靜態的字符串信息。不能在require中進行拼接。例如:
~~~
<Image source={require('./img/my_icon'+'.png')} />
~~~
這樣之后運行就報錯了:

???
????? 2.2.加載使用APP中的圖片
? 現階段做原生APP的需求還是比較多的,不過現在使用了React? Native之后,我們可以進行混合開發APP(一部分采用ReactNative,另一部分采用原生平臺代碼).甚至可以使用已經打包在APP中的圖片資源(例如:xcode asset文件夾以及Android drawable文件夾)
?例如如下代碼我們獲取android項目中的app_icon圖片,并且設置圖片的尺寸帶40x40
~~~
<Image source={{uri:'ic_launcher'}} style={{width: 40, height: 40}} />
~~~
?????????? 不過如果要顯示效果:希望大家做如下修改,因為現在android項目采用gradle,現在不會默認生成drawable文件夾中了,所以大家如果要演示效果,需要在res下面新建一個drawable文件夾,然后放一個圖片進入,接著在重新打包運行即可(這邊測試的是把ic_launcher.png圖片放入到res/drawable文件夾中)。不過經測試drawable-hdpi這類的不同分辨率格式文件夾也可以運行。
該適用于調試版本,如果采用發布版本就需要例如'image!xx.png'格式的訪問方式了
運行效果如下:

????? 2.2.加載使用APP中的圖片
?客戶端的很多圖片資源基本上都是實時通過網絡進行獲取的,該寫法和上面的加載本地資源圖片的方式不太一樣,這邊一定需要指定圖片的尺寸大小,具體代碼示例代碼如下:
~~~
<Image source={{uri:'http://img2.xxh.cc:8080/images/ZTT_1404756641470_image.jpg'}} style={{width:100,height:100}}/>
~~~
加載網絡圖片效果如下:

???? 2.3.Image實現某些控件的背景圖效果
?React Native中支持嵌套的方式,例如我們現在有一個Text組件,假如要實現背景圖的效果,那么可以使用Image嵌套的Text的方式,然后Image加載圖片方式實現,例如代碼如下:
~~~
<Image source={require('./img/my_icon.png')} >
<Text style={{color:'red'}}>下面是背景圖</Text>
</Image>
~~~
具體掩飾效果如下:我們發現Text組件文本底部是一個圖片的背景

# (三)Image屬性方法
?????? 1.onLayout?? (function) 當Image布局發生改變的,會進行調用該方法,調用的代碼為:
{nativeEvent:{layout: {x, y, width, height}}}.
?????? 2.onLoad (function):當圖片加載成功之后,回調該方法
?????? 3.onLoadEnd (function):當圖片加載失敗回調該方法,該不會管圖片加載成功還是失敗
?????? 4.onLoadStart (fcuntion):當圖片開始加載的時候調用該方法
?????? 5.resizeMode? 縮放比例,可選參數('cover', 'contain', 'stretch') 該當圖片的尺寸超過布局的尺寸的時候,會根據設置Mode進行縮放或者裁剪圖片
?????? 6.source {uri:string} 進行標記圖片的引用,該參數可以為一個網絡url地址或者一個本地的路徑????
# (四)Image樣式風格
?????? 1.FlexBox? 支持彈性盒子風格
?????? 2.Transforms? 支持屬性動畫??????????????? 3.resizeMode? 設置縮放模式
?????? 4.backgroundColor背景顏色
?????? 5.borderColor???? 邊框顏色????????????? 6.borderWidth 邊框寬度
?????? 7.borderRadius? 邊框圓角???
?????? 8.overflow 設置圖片尺寸超過容器可以設置顯示或者隱藏('visible','hidden')
?????? 9.tintColor? 顏色設置???????? 10.opacity 設置不透明度0.0(透明)-1.0(完全不透明)
# (五)Image實例-仿照美團首頁頂部分類
?????? 下面我們模仿一下美團首頁的頂部分類的效果,也算是總結了前面所學的View,Text和今天的Image組件,具體代碼如下:
~~~
/**
* 模仿美團首頁頂部分類效果
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image,
} from'react-native';
class TestImage extends Component {
render() {
return (
<View style={{marginLeft:5,marginTop:10,marginRight:5}}>
<View style={{flexDirection:'row'}}>
<View style={{width:70}}>
<Image source={require('./img/one.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>美食</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/two.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>電影</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/three.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>酒店</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/four.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>KTV</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/five.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>外賣</Text>
</View>
</View>
<View style={{flexDirection:'row',marginTop:10}}>
<View style={{width:70}}>
<Image source={require('./img/six.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,textAlign:'center',fontSize:11,color:'#555555'}}>優惠買單</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/seven.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>周邊游</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/eight.png')}style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>休閑娛樂</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/nine.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>今日新單</Text>
</View>
<View style={{width:70}}>
<Image source={require('./img/ten.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={{marginTop:5,alignSelf:'center',fontSize:11,color:'#555555',textAlign:'center'}}>麗人</Text>
</View>
</View>
</View>
);
}
}
AppRegistry.registerComponent('TestImage',() => TestImage);
~~~
注以上的代碼的樣式沒有重構單獨用StyleSheet寫,具體運行效果如下:

# (六)最后總結
????????? 今天我們主要給大家介紹Image組件,以及通過一個具體實例把之前的View和Text組件的基本使用串聯了一下。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。
? ? ? ? ??尊重原創,轉載請注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵權必究!
? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)

? ? ?關注我的微博,可以獲得更多精彩內容
? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)
?
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)