React Native控件之View視圖講解(7) · React Native學習指南

# # 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50540718](http://blog.csdn.net/developer_jiangqq/article/details/50540718) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ???【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)? ? ? ? ?現在幾講我們對于React Native一些基礎做了相關講解(例如:環境搭建,開發IDE,調試以及升級降級等)，今天開始正式進入UI相關組件學習的階段了。首先我們來講一個非常基礎的組件View。 ???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! # (二)View組件介紹 ???????? View作為創建UI時候的最基礎，最常用的組件。這邊的View組件是支持FlexBox布局([對于FlexBox布局的詳細使用講解，請點擊](http://www.w3cplus.com/css3/a-guide-to-flexbox.html))，CSS樣式以及相關觸摸處理的容器組件。該組件我們可以嵌套在其他視圖View里邊，并且可以包含很多種類型的子視圖。在Web,Android，iOS三種平臺上面該View視圖可以對應平臺中的三種原生視圖，其中iOS對于UIView ，Web端對應<div>標簽，Android對于android.view。下面我們來看一個比較簡單的實例: ~~~ 'use strict'; var React = require('react-native'); var { AppRegistry, View, } = React; var TestText = React.createClass({ render: function() { return ( <View style={{flexDirection:'row',padding:20,height:100}}> <View style={{backgroundColor:'red',flex:1}}> </View> </View> ); } }); ~~~ 上述例子,我們這般首先創建了一個View，該View高度為100 ，但是該View的padding為20，所以整體效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbfe4d31c.jpg) 如果把padding修改成margin:20的話，那么是效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbfe5f4f7.jpg) 這個相信做過CSS ,原生布局開發的話，大家應該都能看得懂的。 ?????? 其實ReactNative開發，View設計的時候，也支持我們采用StyleSheet來進行書寫控件的的布局，這樣的話，我們的代碼會更加的清晰以及便于維護了。其實React Native開發也更加推薦這種方式，下面我們采用StyleSheet來實現一下: ~~~ 'use strict'; var React = require('react-native'); var { AppRegistry, View, StyleSheet, } = React; var TestText = React.createClass({ render: function() { return ( <View style={styles.first_view}> <View style={styles.second_view}> </View> </View> ); } }); var styles = StyleSheet.create({ first_view:{ flexDirection:'row', height:100, padding:20 }, second_view: { backgroundColor:'red', flex:1 }, }); AppRegistry.registerComponent('TestText', () => TestText); ~~~ 以上的代碼我們發現使用StyleSheet，進行創建相關styles，然后賦值給styles對象，在控件中直接styles對象進行使用即可。還是比較OK的。 # (三)View屬性方法介紹 ? View屬性方法介紹如下: <table border="1" cellpadding="0" cellspacing="0" valign="top" style="direction:ltr; border-collapse:collapse;border-style:solid;border-color:#A3A3A3;border-width: 1pt"><tbody><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6673in;padding:2.0pt 3.0pt 2.0pt 3.0pt">序號</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.4479in;padding:2.0pt 3.0pt 2.0pt 3.0pt">名稱</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.8402in;padding:2.0pt 3.0pt 2.0pt 3.0pt">屬性Or方法</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6805in;padding:2.0pt 3.0pt 2.0pt 3.0pt">類型</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:5.2451in;padding:2.0pt 3.0pt 2.0pt 3.0pt">說明</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6673in;padding:2.0pt 3.0pt 2.0pt 3.0pt">1</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.4479in;padding:2.0pt 3.0pt 2.0pt 3.0pt">accessibilityLabel</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.8215in;padding:2.0pt 3.0pt 2.0pt 3.0pt">屬性</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6805in;padding:2.0pt 3.0pt 2.0pt 3.0pt">string</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:5.2645in;padding:2.0pt 3.0pt 2.0pt 3.0pt">?</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6673in;padding:2.0pt 3.0pt 2.0pt 3.0pt">2</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.4479in;padding:2.0pt 3.0pt 2.0pt 3.0pt">accessible</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.8215in;padding:2.0pt 3.0pt 2.0pt 3.0pt">屬性</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6805in;padding:2.0pt 3.0pt 2.0pt 3.0pt">bool</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:5.2645in;padding:2.0pt 3.0pt 2.0pt 3.0pt">當為trues時，表示該元素是可以進行訪問，默認情況下 所有可觸摸的元素控件都是可以訪問的</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6673in;padding:2.0pt 3.0pt 2.0pt 3.0pt">3</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.4479in;padding:2.0pt 3.0pt 2.0pt 3.0pt">onAccessibilityTap</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.8215in;padding:2.0pt 3.0pt 2.0pt 3.0pt">方法</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6805in;padding:2.0pt 3.0pt 2.0pt 3.0pt">function</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:5.4597in;padding:2.0pt 3.0pt 2.0pt 3.0pt">該黨accessible有true的時候并且用戶對控件View做了一個Tap(輕輕的觸摸或者點擊)的手勢</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6673in;padding:2.0pt 3.0pt 2.0pt 3.0pt">4</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.4479in;padding:2.0pt 3.0pt 2.0pt 3.0pt">onLayout</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.8215in;padding:2.0pt 3.0pt 2.0pt 3.0pt">方法</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6805in;padding:2.0pt 3.0pt 2.0pt 3.0pt">function</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:5.5631in;padding:2.0pt 3.0pt 2.0pt 3.0pt">當組件的布局發生變動的時候，會自動調用下面的方法: {nativeEvent: { layout: {x, y, width, height}}}。該事件當重新計算布局的時候會立即進行觸發，不過界面可能不會立即刷新，特別當布局動畫正在加載中的時候。</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6673in;padding:2.0pt 3.0pt 2.0pt 3.0pt">5</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.4479in;padding:2.0pt 3.0pt 2.0pt 3.0pt">onMagicTap</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.8215in;padding:2.0pt 3.0pt 2.0pt 3.0pt">方法</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:.6805in;padding:2.0pt 3.0pt 2.0pt 3.0pt">function</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:5.3756in;padding:2.0pt 3.0pt 2.0pt 3.0pt">當accessible為true的時候，當用戶雙指點擊(Magic Tap)的時候，進行觸發</td> </tr></tbody></table> 其他的一些方法如下(下面很多是關于事件響應者鏈的，基本都是比較簡單的，就不著重講解的，有興趣大家都可以去測試一下): onMoveShouldSetResponder，onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,onResponderReject,onResponderRelease,onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,pointerEvents enum('box-none', 'none', 'box-only', 'auto')(觸摸事件是否可以進行穿透控件View); removeClippedSubviews:該控件由于進行優化性能，尤其在一些滑動控件上面。該屬性生效的要求如下:首先子視圖的內容非常多，已經超過父容器，并且子視圖和付容器視圖都有overflow:hidden風格樣式。【注】關于上面一些方法的具體使用，后面在講到事件響應者的時候會進行著重講解。 # (四)View風格Style介紹 ???????? 在React Native中的Style風格布局，其實和CSS樣式有很多相似的地方，這邊介紹一下: <table border="1" cellpadding="0" cellspacing="0" valign="top" style="direction:ltr; border-collapse:collapse;border-style:solid;border-color:#A3A3A3;border-width: 1pt"><tbody><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">Style標簽</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6006in;padding:2.0pt 3.0pt 2.0pt 3.0pt">說明</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2604in;padding:2.0pt 3.0pt 2.0pt 3.0pt">?Style標簽</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.7076in;padding:2.0pt 3.0pt 2.0pt 3.0pt">說明</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">FlexBox</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6006in;padding:2.0pt 3.0pt 2.0pt 3.0pt">彈性布局(<a target="_blank" href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html">詳細點擊了解</a>)</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2604in;padding:2.0pt 3.0pt 2.0pt 3.0pt">transforms</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.7076in;padding:2.0pt 3.0pt 2.0pt 3.0pt">動畫屬性(<a target="_blank" href="http://facebook.github.io/react-native/docs/transforms.html#proptypes">詳細點擊了解</a>)</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">backfaceVisibility</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6006in;padding:2.0pt 3.0pt 2.0pt 3.0pt">enum('visible', 'hidden')定義界面翻轉的時候是否可見</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2798in;padding:2.0pt 3.0pt 2.0pt 3.0pt">backgroundColor</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.6881in;padding:2.0pt 3.0pt 2.0pt 3.0pt">背景顏色</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">borderColor</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6201in;padding:2.0pt 3.0pt 2.0pt 3.0pt">邊跨顏色,這邊幾個就是代表上下左右變寬的顏色 borderTopColor,borderRightColor,borderBottomColor,borderLeftColor</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2604in;padding:2.0pt 3.0pt 2.0pt 3.0pt">borderRadius</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.9236in;padding:2.0pt 3.0pt 2.0pt 3.0pt">邊框圓角大小，其他幾個是上下左右邊框的圓角.borderTopLeftRadius,borderTopRightRadius,borderBottomLeftRadius, borderBottomRightRadius</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">borderStyle</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6006in;padding:2.0pt 3.0pt 2.0pt 3.0pt">邊框線的風格,這個和CSS樣式一樣的,enum('solid', 'dotted', 'dashed')</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2604in;padding:2.0pt 3.0pt 2.0pt 3.0pt">borderWidth</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.9055in;padding:2.0pt 3.0pt 2.0pt 3.0pt">邊框寬度，另外四個是上下左右的邊框寬度:borderTopWidth，borderRightWidth，borderBottomWidth，borderLeftWidth</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">opacity</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6006in;padding:2.0pt 3.0pt 2.0pt 3.0pt">設置透明度</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2604in;padding:2.0pt 3.0pt 2.0pt 3.0pt">overflow</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.7076in;padding:2.0pt 3.0pt 2.0pt 3.0pt">設置內容超過容器顯示還是隱藏</td> </tr><tr><td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.3125in;padding:2.0pt 3.0pt 2.0pt 3.0pt">elevation</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:3.6006in;padding:2.0pt 3.0pt 2.0pt 3.0pt">高度，設置Z軸，可以產生立體效果</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:1.2604in;padding:2.0pt 3.0pt 2.0pt 3.0pt">?</td> <td style="border-style:solid;border-color:#A3A3A3;border-width:1pt; vertical-align:top;width:2.7076in;padding:2.0pt 3.0pt 2.0pt 3.0pt">?</td> </tr></tbody></table> 下面是幾個特殊的屬性，這邊直接介紹所有平臺通用以及只在Android平臺有效果的屬性 ①.testID? (全平臺) ???? 可以根據該testID在測試的時候定位該View ②:accessibilityComponentType(android平臺) ???? 定義是否該UI組件和原生組件一致化處理 ③.accessibilityLiveRegion? enum('none','polite','assertive')?(android平臺) ??? 該當View發生更新時候的，是否需要通過用戶，不過該只對Android4.4以及以上的平臺設備有效果 ④.collapsable (android平臺) ??? 布局合并優化使用 ⑤.importantForAccessibility enum('auto','yes', 'no', 'no-hide-descendants') (android平臺) ??? 設置視圖響應事件等級 ⑥.needsOffscreenAlphaCompositing?(android平臺) ???? 設置View是否需要渲染和半透明度效果處理的先后次序。 ⑦.renderToHardwareTextureAndroid?(android) ?? 設置是否需要GPU進行渲染最后實例的官方實例為:[https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js](https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/ViewExample.js) # (五)最后總結 ????????? 今天我們主要介紹了基礎控件View的使用方法以及相關屬性風格，大家有問題可以加一下群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) ?