<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                # # 轉載請標明出處: [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) ?
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看