React Native控件之Image組件講解與美團首頁頂部效果實例(10) · React Native學習指南

# # 轉載請標明出處： [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> ~~~ 運行結果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc002b683.jpg) ???????? 該圖片資源文件的查找和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')} /> ~~~ 這樣之后運行就報錯了: ![](https://box.kancloud.cn/2016-02-29_56d3fc003e22f.jpg) ??? ????? 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'格式的訪問方式了運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc005537d.jpg) ????? 2.2.加載使用APP中的圖片 ?客戶端的很多圖片資源基本上都是實時通過網絡進行獲取的，該寫法和上面的加載本地資源圖片的方式不太一樣，這邊一定需要指定圖片的尺寸大小,具體代碼示例代碼如下: ~~~ <Image source={{uri:'http://img2.xxh.cc:8080/images/ZTT_1404756641470_image.jpg'}} style={{width:100,height:100}}/> ~~~ 加載網絡圖片效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc006832a.jpg) ???? 2.3.Image實現某些控件的背景圖效果 ?React Native中支持嵌套的方式，例如我們現在有一個Text組件，假如要實現背景圖的效果，那么可以使用Image嵌套的Text的方式，然后Image加載圖片方式實現,例如代碼如下: ~~~ <Image source={require('./img/my_icon.png')} > <Text style={{color:'red'}}>下面是背景圖</Text> </Image> ~~~ 具體掩飾效果如下：我們發現Text組件文本底部是一個圖片的背景 ![](https://box.kancloud.cn/2016-02-29_56d3fc0080892.jpg) # (三)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寫，具體運行效果如下： ![](https://box.kancloud.cn/2016-02-29_56d3fc009533e.jpg) # (六)最后總結 ????????? 今天我們主要給大家介紹Image組件，以及通過一個具體實例把之前的View和Text組件的基本使用串聯了一下。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ? ??尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)）侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) ![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg) ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[![](https://box.kancloud.cn/2016-02-29_56d3fbf76bdef.png)](http://weibo.com/u/1855428195?s=6uyXnP) ?