#
#
轉載請標明出處:
[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,所以整體效果如下:

如果把padding修改成margin:20的話,那么是效果如下:

這個相信做過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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei"" lang="zh-CN">屬性</span><span style="font-family:Calibri" lang="en-US">Or</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei"" lang="zh-CN">當為</span><span style="font-family:Calibri" lang="en-US">trues</span><span style="font-family:"Microsoft YaHei"" lang="zh-CN">時,表示該元素是可以進行訪問,默認情況下</span></p> <p style="margin:0in;font-family:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei"" lang="zh-CN">該黨</span><span style="font-family:Calibri" lang="en-US">accessible</span><span style="font-family:"Microsoft YaHei"" lang="zh-CN">有</span><span style="font-family:Calibri" lang="zh-CN">true</span><span style="font-family: "Microsoft YaHei"" lang="zh-CN">的時候并且用戶對控件</span><span style="font-family:Calibri" lang="zh-CN">View</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei"" lang="zh-CN">輕輕的觸摸或者點擊</span><span style="font-family:Calibri" lang="en-US">)</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei";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:"Microsoft YaHei"" 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:"Microsoft YaHei"">。該事件當重新計算布局的時候會立即進行觸發,不過界面可能不會立即刷新,特別當布局動畫正在加載中的時候。</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:"Microsoft YaHei";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:"Microsoft YaHei"" lang="zh-CN">當</span><span style="font-family:Calibri" lang="en-US">accessible</span><span style="font-family:"Microsoft YaHei"" lang="zh-CN">為</span><span style="font-family:Calibri" lang="zh-CN">true</span><span style="font-family: "Microsoft YaHei"" lang="zh-CN">的時候,當用戶雙指點擊</span><span style="font-family: Calibri" lang="en-US">(Magic Tap)</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei";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: "Microsoft YaHei"" 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:"Microsoft YaHei";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:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei"">定義界面翻轉的</span></p><p style="margin:0in;font-size:11.0pt"><span style="font-family:"Microsoft YaHei"">時候是否可見</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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei"" lang="zh-CN">邊跨顏色</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei"" lang="zh-CN">borderBottomColor</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei"" lang="zh-CN">邊框線的風格</span><span style="font-family:Calibri" lang="en-US">,</span><span style="font-family:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei"" 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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei";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:"Microsoft YaHei";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),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)

? ? ?關注我的微博,可以獲得更多精彩內容
? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)
?
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)