React Native學習(二)之View

React Native組件解析(二)之View

0.JSX

React的核心機制之一就是虛擬DOM：能夠在內存中建立的虛擬DOM元素。React利用虛擬DOM來減小對實際DOM的操做從而提高性能.

JSX的語法以下

return (
    <View style={styles3.container}>
      <Text> 當前屏幕的寬度：{Dimensions.get('window').width} </Text>
    </View>
);

在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，JSX的語法不會帶來任何性能影響。所以，JSX自己並非什麼高深的技術，能夠說只是一個比較高級但很直觀的語法糖。

1.概述

View組件是RN中最基本的組件，絕大部分的組件都繼承了View組件的屬性，因此學習其餘組件前，要首先掌握View組件。View組件是一個支持Flexbox佈局、樣式、一些觸摸處理的容器，它能夠放到其它的組件裏，也能夠有任意多個任意類型的子組件。View組件對應着多個平臺的視圖，好比Android的View以及iOS的UIView。因爲View組件

2.View的常見屬性

View組件等同於iOS中的UIView，Android中的View，已經網頁中的

標籤，它是全部組件的父組件。能夠添加子View

Flexbox 彈性佈局
Transforms  動畫屬性
backfaceVisibility enum('visible', 'hidden')    定義界面翻轉的時候是否可見
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 設置透明度，取值從0-1；
overflow enum('visible', 'hidden')  設置內容超出容器部分是顯示仍是隱藏；
elevation number 高度   設置Z軸，可產生立體效果。

下面對一些常見的屬性進行詳細解讀

3. 解讀

style屬性做爲組件屬性中的一種，它包含了多種屬性，這裏對它們意義進行講解。

3.1 Flexbox

View的Flexbox屬性我會經過一篇詳細的文章進行介紹。View組件有Flexbox屬性，繼承了View組件的其餘組件也都具備Flexbox屬性。

3.2 shadow相關

View提供了四種陰影屬性以下表：

樣式名字	值	說明
shadowColor	color	設置陰影顏色
shadowOffset	{width: number, height: number}	設置陰影位移值
shadowOpacity	number	設置陰影透明度
shadowRadius	number	設置陰影模糊半徑

3.3 overflow (iOS)

overflow取值爲 enum('visible', 'hidden')。它用來定義當View組件的子組件的寬高超過View組件寬高時的行爲，默認值爲hidden，即隱藏超出的部分。overflow只在iOS平臺有效

3.3 opacity

opacity 的取值爲0到1，當值爲0時，表示組件徹底透明，而值爲1時，則表示組件徹底不透明。

3.4 pointerEvents

pointerEvents的取值爲enum('box-none', 'none', 'box-only', 'auto') 。它用來控制事件的傳遞鏈。pointerEvents的取值含義以下所示：

• none：組件自身不能做爲觸控事件的目標，交由父組件處理。
• box-none：組件自身不能做爲觸控事件的目標，但其子組件能夠。
• box-only：組件自身能夠做爲觸控事件的目標，但其子組件不能。
• auto：組件能夠做爲觸控事件的目標。

3.5 removeClippedSubviews

removeClippedSubviews的取值爲bool。它的一個特殊的與性能優化相關的屬性，一般在ListView和ScrollView中使用，當組件有不少子組件不在屏幕顯示範圍時，能夠將removeClippedSubviews設置爲true，容許釋放不在顯示範圍子組件，從而優化了性能。須要注意的是，要想讓此屬性生效，要確保overflow屬性爲默認的hidden。

參考：View