React Native 學習筆記（二）View組件

View組件

概念

建立UI時最基礎的組件，絕大部分組件都繼承了View組件的屬性。 View是一個支持FlexBox佈局，樣式，一些觸摸處理和一些無障礙功能的容器。而且能夠放在其餘的視圖裏，也能夠有多個任意類型的子視圖。 不論在什麼平臺上，View都會直接對應一個平臺的原生視圖，不管它是UIView，div仍是android.view.View。

下面建立了一個View，裏面包含了兩個View

class ViewDemo extends Component {
  render(){
    return(
      <View style={{
        flexDirection:'row',
        height:100,
        padding:20
      }}>
        <View style={{backgroundColor:'red' flex: 0.3}}/>
        <View style={{backgroundColor:'blue' flex: 0.5}}/>
        <Text></Text>
      </View>
    )
  }
}
複製代碼

View的設計初衷是爲了搭配StyleSheet使用，這樣是代碼更清晰且得到更高的性能

經常使用屬性

1.style屬性

style屬性用於設置View的樣式，能夠設置多種屬性，以下

1.1 FlexBox 屬性

View組件支持FlexBox佈局

1.2 陰影屬性

安卓手機上設置陰影與IOS上不一致，iOS使用shadow屬性，Android使用elevation，可是效果不夠好，推薦使用第三方庫，react-native-shadow

1.2.1shadow相關(iOS)

View組件提供了四種陰影屬性，以下:

• shadowColor 設置陰影顏色 值：color
• shadowOffset 設置陰影位移值 值：{width:number,height:number}
• shadowOpacity 設置陰影透明度 值: number
• shadowRadius 設置陰影模糊半徑 值：number **注意：**設置View組件的陰影屬性並無什麼意義，在View組件中定義這些屬性是爲了讓繼承它的組件能夠各自去實現這個效果。只有iOS平臺可使用shadow屬性

1.2.2 elevation(Android)

elevation的值爲number。Android平臺沒有shadow來設置陰影，可是能夠用elevation屬性來間接設置陰影。它使用Android原生的elevation API來設置組件的高度，這樣就會在頁面上呈現陰影的效果，此效果只支持Android 5.0+

1.3 border相關

• borderStyle 邊框樣式 borderStyle的取值爲三個，solid(實現邊框)，dotted(點狀邊框)，dashed(虛線邊框)
• borderColor 邊框顏色 能夠細分爲 borderTopColor 、borderRightColor 、borderBottomColor 、borderLeftColor，取值爲string
• borderRadius 邊框圓角 能夠細分爲borderRadius 、borderTopLeftRadius 、borderTopRightRadius 、borderBottomLeftRadius 、borderBottomRightRadius，top和bottom在前面，left和right在後面，取值爲number

注意：

若是不設置borderRadius,borderStyle的dotted和dashed的取值會失效。

1.4 transform

transform的取值分爲四種類型，translate(平移),scale(縮放),rotate(旋轉),skew(傾斜)。 rotate和skew的區別，rotate在旋轉的同時，不會改變組件自己的形態，而skew則隨着傾斜角度的改變，組件的形態也會發生相應的變化。 View組件用transform屬性的效果不是很明顯，絕大部分組件都繼承了View的transform屬性。

1.5 overflow(iOS)

overflow取值爲visable，hidden，用來定義當View組件的子組件的寬高超過View組件寬高時的行爲，默認值爲hidden，即隱藏超出的部分。 oveflow只在iOS平臺有效，在Android平臺即便設置overflow爲visable，呈現的仍是hidden的效果。

1.6 backgroundColor

設置背景顏色，默認爲很是淺的灰色，只有Text和TextInput會繼承父組件的背景顏色，其餘的組件都要設置本身的背景顏色。

1.7 opacity

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

2.觸摸事件回調函數

3.removeClippedSubviews

4.動畫相關

參考連接

1.官方文檔 2.React Native組件（二）View組件解析 | 劉望舒的博客