<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>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # # 轉載請標明出處: [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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">序號</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">名稱</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">屬性</span><span style="font-family:Calibri" lang="en-US">Or</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">方法</span></p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">類型</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">說明</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">1</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">accessibilityLabel</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">屬性</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">string</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">?</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">2</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">accessible</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">屬性</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">bool</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">當為</span><span style="font-family:Calibri" lang="en-US">trues</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">時,表示該元素是可以進行訪問,默認情況下</span></p> <p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">所有可觸摸的元素控件都是可以訪問的</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">3</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">onAccessibilityTap</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">方法</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">function</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">該黨</span><span style="font-family:Calibri" lang="en-US">accessible</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">有</span><span style="font-family:Calibri" lang="zh-CN">true</span><span style="font-family: &quot;Microsoft YaHei&quot;" lang="zh-CN">的時候并且用戶對控件</span><span style="font-family:Calibri" lang="zh-CN">View</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">做了一個</span><span style="font-family:Calibri" lang="zh-CN">Tap</span><span style="font-family: Calibri" lang="en-US">(</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">輕輕的觸摸或者點擊</span><span style="font-family:Calibri" lang="en-US">)</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">的手勢</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">4</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">onLayout</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">方法</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">function</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">當組件的布局發生變動的時候,會自動調用下面的方法</span><span style="font-family:Calibri" lang="en-US">:</span></p> <p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri">{nativeEvent: { layout: {x, y, width, height}}}</span><span style="font-family:&quot;Microsoft YaHei&quot;">。該事件當重新計算布局的時候會立即進行觸發,不過界面可能不會立即刷新,特別當布局動畫正在加載中的時候。</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">5</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">onMagicTap</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt; text-align:center">方法</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">function</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">當</span><span style="font-family:Calibri" lang="en-US">accessible</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">為</span><span style="font-family:Calibri" lang="zh-CN">true</span><span style="font-family: &quot;Microsoft YaHei&quot;" lang="zh-CN">的時候,當用戶雙指點擊</span><span style="font-family: Calibri" lang="en-US">(Magic Tap)</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">的時候,進行觸發</span></p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri" lang="en-US">Style</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">標簽</span></p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">說明</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri" lang="en-US">?</span><span style="font-family:Calibri" lang="zh-CN">Style</span><span style="font-family: &quot;Microsoft YaHei&quot;" lang="zh-CN">標簽</span></p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">說明</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt"><span lang="zh-CN">Flex</span><span lang="en-US">Box</span></p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">彈性布局</span><span style="font-family:Calibri" lang="en-US">(</span><a target="_blank" href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">詳細點擊了解</span></a><span style="font-family:Calibri" lang="en-US">)</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt" lang="en-US">transforms</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">動畫屬性</span><span style="font-family:Calibri" lang="en-US">(</span><a target="_blank" href="http://facebook.github.io/react-native/docs/transforms.html#proptypes"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">詳細點擊了解</span></a><span style="font-family:Calibri" lang="en-US">)</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">backfaceVisibility</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri">enum('visible', 'hidden')</span><span style="font-family:&quot;Microsoft YaHei&quot;">定義界面翻轉的</span></p><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;">時候是否可見</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">backgroundColor</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">背景顏色</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">borderColor</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">邊跨顏色</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">這邊幾個就是代表上下左右變寬的顏色</span></p> <p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri" lang="zh-CN">borderTopColor</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:Calibri" lang="zh-CN">borderRightColor</span></p><p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">borderBottomColor</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">borderLeftColor</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">borderRadius</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">邊框圓角大小,其他幾個是上下左右邊框的圓角</span><span style="font-family:Calibri" lang="en-US">.</span><span style="font-family:Calibri" lang="zh-CN">borderTopLeftRadius</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:Calibri" lang="zh-CN">borderTopRightRadius</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:Calibri" lang="zh-CN">borderBottomLeftRadius</span><span style="font-family:Calibri" lang="en-US">,</span></p> <p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">borderBottomRightRadius</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">borderStyle</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">邊框線的風格</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">這個和CSS樣式一樣的</span></p><p style="margin:0in;font-size:11.0pt"><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:Calibri" lang="zh-CN">enum('solid', 'dotted', 'dashed')</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">borderWidth</p></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"><p style="margin:0in;font-size:11.0pt"><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">邊框寬度,另外四個是上下左右的邊框寬度</span><span style="font-family:Calibri" lang="en-US">:</span><span style="font-family:Calibri" lang="zh-CN">borderTopWidth</span><span style="font-family:&quot;Microsoft YaHei&quot;" lang="zh-CN">,borderRightWidth,borderBottomWidth,borderLeftWidth</span></p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">opacity</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">設置透明度</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">overflow</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">設置內容超過容器顯示還是隱藏</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">elevation</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">高度,設置Z軸,可以產生立體效果</p></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"><p style="margin:0in;font-family:&quot;Microsoft YaHei&quot;;font-size:11.0pt">?</p></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"><p style="margin:0in;font-family:Calibri;font-size:11.0pt">?</p></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) ?
                  <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>

                              哎呀哎呀视频在线观看