【React Native開發】React Native控件之Image組件講解與美團首頁頂部效果實例(10)
( 一 ) 前言
【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏: 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 ， @2 X 等格式的圖片來進行適配手機屏幕，例如 :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 ass et 文件夾以及 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. on LoadStart (fcuntion): 當圖片開始加載的時候調用該方法
5. re sizeMode 縮放比例 , 可選參數 ( 'cover', 'contain', 'stretch' ) 該當圖片的尺寸超過布局的尺寸的時候，會根據設置Mode進行縮放或者裁剪圖片
6.source {uri:string} 進行標記圖片的引用，該參數可以為一個網絡url地址或者一個本地的路徑
( 四 )Image 樣式風格
1.FlexBox 支持彈性盒子風格
2.Transforms 支持屬性動畫 3.resizeMode 設置縮放模式
4.background Color 背景顏色
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/非死book/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);</pre>
注以上的代碼的樣式沒有重構 單獨用 StyleSheet 寫， 具體運行效果如下：
( 六 ) 最后總結
今天我們主要給大家介紹 Image 組件，以及通過一個具體實例把之前的View和Text組件的基本使用串聯了一下。大家有問題可以加一下群 React Native 技術交流群 ( 282693535 ) 或者底下進行回復一下。
尊重原創，轉載請注明：From Sky丶清（ http://blog.csdn.net/developer_jiangqq ） 侵權必究！
關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章)
關注我的微博，可以獲得更多精彩內容
