React Native樣式總結

寫在前面的話，跟pc端相比，React Native不少都不支持，好比最簡單的浮動；
這裏將全部的React Native樣式簡單分了下類，增強下記憶。

flex佈局類

• alignItems
• alignSelf
• flex flex-grow、flex-shrink、flex-basis（定義了在分配多餘空間以前，項目佔據的主軸空間，默認auto，項目的原本大小）
• flexDirection
• flexWrap
• justifyContent

border相關的樣式

• borderColor
• borderRadius
• borderStyle
• borderWidth
• borderBottomColor
• borderBottomLeftRadius
• borderBottomRightRadius
• borderBottomWidth

同理 borderLeft等

佈局相關

• margin、marginBottom、marginHorizontal、marginLeft、marginRight、marginTop、marginVertical
  marginHorizontal：設置相同的marginLeft、marginRight
• padding、paddingTop、paddingBottom、paddingHorizontal、paddingLeft、paddingRight、paddingVertical
• position
• top
• left
• right
• bottom
• overflow
• textAlign

元素相關屬性

• height
• width
• lineHeight
• letterSpacing
• opacity

字體樣式

• color
• fontFamily
• fontSize
• fontStyle 設置字體樣式，有四個值，normal默認值，italic斜體，oblique傾斜，inherit繼承
• fontWeight
• textDecorationColor
• textDecorationLine
• textDecorationStyle

顏色類

• backgroundColor
• tintColor是描述線條輪廓的一種顏色,該顏色默認具備傳遞性,默認狀態下最底部的視圖的tintcolor會一直往上面的視圖傳遞,iso組件的一種樣式

css3

• transformMatrix 定義 2D 轉換，使用六個值的矩陣。包含數學函數，容許：旋轉、縮放、移動以及傾斜元素。
• writingDirection
• translateX 定義轉換，在X軸，
• translateY 定義轉換、在Y軸
• transform 向元素應用2D或3D轉換，該屬性容許咱們對元素進行旋轉、縮放、移動或傾斜
• rotation，180deg
• scaleX， scaleY 設置2D縮放
• shadowColor、shadowOffset（水平，垂直）、shadowOpacity、shadowRadius（陰影半徑）手機組件內部的屬性，view相關

其餘一些屬性

• resizeMode 當Image的實際寬、高與圖片的實際寬、高不符時,視圖片樣式定義中resizeMode的取值不一樣而分爲三種狀況, 三個取值分別是:

  contain, cover和stretch.默認值是cover。
  cover模式只求在顯示比例不失真的狀況下填充整個顯示區域。能夠對圖片進行放大或者縮小，超出顯示區域的部分不顯示， 也就是說，圖片可能部分會顯示不了。

  contain模式是要求顯示整張圖片, 能夠對它進行等比縮小, 圖片會顯示完整,可能會露出Image控件的底色。 若是圖片寬高都小於控件寬高，則不會對圖片進行放大。

  stretch模式不考慮保持圖片原來的寬,高比.填充整個Image定義的顯示區域,這種模式顯示的圖片可能會畸形和失真。

• backfaceVisibility 這是一個CSS3屬性，backface-visibility 屬性定義當元素不面向屏幕時是否可見（是旋轉事後的）

style

一個一般的作法是根據某些條件選擇性地添加樣式。（以下面的代碼，當this.state.active爲false時，styles.active就會被忽略掉）

<View style={[styles.base, this.state.active && styles.active]} />

參考地址：

• http://www.runoob.com/w3cnote/flex-grammar.html
• http://www.w3school.com.cn/cssref/pr_backface-visibility.asp
• http://blog.csdn.net/bitian123/article/details/54629347
• http://reactnative.cn/docs/0.31/layout-props.html