React-Native 樣式指南

React-Native 的樣式基本上是實現了 CSS 的一個子集，並且屬性名不完全一致，所以當你開始在編寫 React-Native 之前，可以先簡要了解一下。

Properties 屬性

Text 文字（18）

屬性名	取值	描述
color	<color>	對應 `CSS` color 屬性
fontFamily	string	對應 `CSS` font-family 屬性
fontSize	<number>	對應 `CSS` font-size 屬性
fontStyle	`normal`, `italic`	對應 `CSS` font-style 屬性，但閹割了 `oblique` 取值
fontWeight	`normal`, `bold` `100~900`	對應 `CSS` font-weight 屬性，但閹割了 `bolder, lighter` 取值
lineHeight	<number>	對應 `CSS` line-height 屬性
textAlign	`auto`, `left`, `right`, `center`, `justify`^iOS	對應 `CSS` text-align 屬性，但增加了 `auto` 取值。當取值為 `justify` 時，在 `Android` 上會變為 `left`
textDecorationLine	`none`, `underline`, `line-through`, `underline line-through`	對應 `CSS` text-decoration-line 屬性，但閹割了 `overline`, `blink` 取值
textShadowColor	<color>	對應 `CSS` text-shadow 屬性中的顏色定義
textShadowOffset	{ width:<number>, height:<number> }	對應 `CSS` text-shadow 屬性中的陰影偏移定義
textShadowRadius	<number>	在 `CSS` 中，陰影的圓角大小取決於元素的圓角定義，不需要額外定義
includeFontPadding ^Android	<bool>	Android在預設情況下會為文字額外保留一些padding，以便留出空間擺放上標或是下標的文字。對於某些字型來說，這些額外的padding可能會導致文字難以垂直居中。如果你把textAlignVertical設定為center之後，文字看起來依然不在正中間，那麼可以嘗試將本屬性設定為false
textAlignVertical ^Android	`auto`, `top`, `bottom`, `center`	對應 `CSS` vertical-align 屬性，增加了 `auto` 取值，`center` 取代了 `middle`，並閹割了 `baseline, sub` 等值
fontVariant ^iOS	`small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`	對應 `CSS` font-variant 屬性，但取值更豐富
letterSpacing ^iOS	<number>	對應 `CSS` letter-spacing 屬性
textDecorationColor ^iOS	<color>	對應 `CSS` text-decoration-color 屬性
textDecorationStyle ^iOS	`solid`, `double`, `dotted`, `dashed`	對應 `CSS` text-decoration-style 屬性，但閹割了 `wavy` 取值
writingDirection ^iOS	`auto`, `ltr`, `rtl`	對應 `CSS` direction 屬性，增加了 `auto` 取值

Dimension 尺寸（6）

屬性名	取值	描述
width	<number>	對應 `CSS` width 屬性
minWidth	<number>	對應 `CSS` min-width 屬性
maxWidth	<number>	對應 `CSS` max-width 屬性
height	<number>	對應 `CSS` height 屬性
minHeight	<number>	對應 `CSS` min-height 屬性
maxHeight	<number>	對應 `CSS` max-height 屬性

Positioning 定位（6）

屬性名	取值	描述
position	`absolute`, `relative`	對應 `CSS` position 屬性，但閹割了 `static, fixed` 取值
top	<number>	對應 `CSS` top 屬性
right	<number>	對應 `CSS` right 屬性
bottom	<number>	對應 `CSS` bottom 屬性
left	<number>	對應 `CSS` left 屬性
zIndex	<number>	對應 `CSS` z-index 屬性

Margin 外部白（7）

屬性名	取值	描述
margin	<number>	對應 `CSS` margin 屬性，不同的是，它只能定義一個引數，如需分別定義`上、右、下、左`4個方位的外補白，可以通過下面的單向外部白屬性
marginHorizontal	<number>	無對應的 `CSS` 屬性。其效果相當於同時設定 `marginRight` 和 `marginLeft`
marginVertical	<number>	無對應的 `CSS` 屬性。其效果相當於同時設定 `marginTop` 和 `marginBottom`
marginTop	<number>	對應 `CSS` margin-top 屬性
marginRight	<number>	對應 `CSS` margin-right 屬性
marginBottom	<number>	對應 `CSS` margin-bottom 屬性
marginLeft	<number>	對應 `CSS` margin-left 屬性

Padding 內部白（7）

屬性名	取值	描述
padding	<number>	對應 `CSS` padding 屬性，不同的是，它只能定義一個引數，如需分別定義`上、右、下、左`4個方位的內補白，可以通過下面的單向內部白屬性
paddingHorizontal	<number>	無對應的 `CSS` 屬性。其效果相當於同時設定 `paddingRight` 和 `paddingLeft`
paddingVertical	<number>	無對應的 `CSS` 屬性。其效果相當於同時設定 `paddingTop` 和 `paddingBottom`
paddingTop	<number>	對應 `CSS` padding-top 屬性
paddingRight	<number>	對應 `CSS` padding-right 屬性
paddingBottom	<number>	對應 `CSS` padding-bottom 屬性
paddingLeft	<number>	對應 `CSS` padding-left 屬性

Border 邊框（20）

屬性名	取值	描述
borderStyle	`solid`, `dotted`, `dashed`	對應 `CSS` `border-style` 屬性，但閹割了 `none, hidden, double, groove, ridge, inset, outset` 取值，且無方向分拆屬性
borderWidth	<number>	對應 `CSS` `border-width` 屬性
borderTopWidth	<number>	對應 `CSS` `border-top-width` 屬性
borderRightWidth	<number>	對應 `CSS` `border-right-width` 屬性
borderBottomWidth	<number>	對應 `CSS` `border-bottom-width` 屬性
borderLeftWidth	<number>	對應 `CSS` `border-left-width` 屬性
borderColor	<color>	對應 `CSS` `border-color` 屬性
borderTopColor	<color>	對應 `CSS` `border-top-color` 屬性
borderRightColor	<color>	對應 `CSS` `border-right-color` 屬性
borderBottomColor	<color>	對應 `CSS` `border-bottom-color` 屬性
borderLeftColor	<color>	對應 `CSS` `border-left-color` 屬性
borderRadius	<number>	對應 `CSS` `border-radius` 屬性
borderTopLeftRadius	<number>	對應 `CSS` `border-top-left-radius` 屬性
borderTopRightRadius	<number>	對應 `CSS` `border-top-right-radius` 屬性
borderBottomLeftRadius	<number>	對應 `CSS` `border-bottom-left-radius` 屬性
borderBottomRightRadius	<number>	對應 `CSS` `border-bottom-right-radius` 屬性
shadowColor	<color>	對應 `CSS` box-shadow 屬性中的顏色定義
shadowOffset	{ width: <number>, height: <number> }	對應 `CSS` box-shadow 屬性中的陰影偏移定義
shadowRadius	<number>	在 `CSS` 中，陰影的圓角大小取決於元素的圓角定義，不需要額外定義
shadowOpacity	<number>	對應 `CSS` box-shadow 屬性中的陰影透明度定義

Background 背景（1）

屬性名	取值	描述
backgroundColor	<color>	對應 `CSS` `background-color` 屬性

Transform 轉換（3）

屬性名	取值	描述
transform	`[{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]`	對應 `CSS` `transform` 屬性
transformMatrix	`TransformMatrixPropType`	類似於 `CSS` 中 `transform` 屬性的 `matrix()` 和 `matrix3d()` 函式
backfaceVisibility	`visible`, `hidden`	對應 `CSS` `backface-visibility` 屬性

Flexbox 彈性盒（9）

屬性名	取值	描述
flex	<number>	對應 `CSS` `flex` 屬性，但只能為整數值
flexGrow	<number>	對應 `CSS` `flex-grow` 屬性
flexShrink	<number>	對應 `CSS` `flex-shrink` 屬性
flexBasis	<number>	對應 `CSS` `flex-basis` 屬性
flexDirection	`row`, `row-reverse`, `column`, `column-reverse`	對應 `CSS` `flex-direction` 屬性
flexWrap	`wrap`, `nowrap`	對應 `CSS` `flex-wrap` 屬性，但閹割了 `wrap-reverse` 取值
justifyContent	`flex-start`, `flex-end`, `center`, `space-between`, `space-around`	對應 `CSS` `justify-content` 屬性，但閹割了 `stretch` 取值。
alignItems	`flex-start`, `flex-end`, `center`, `stretch`	對應 `CSS` `align-items` 屬性，但閹割了 `baseline` 取值。
alignSelf	`auto`, `flex-start`, `flex-end`, `center`, `stretch`	對應 `CSS` `align-self` 屬性，但閹割了 `baseline` 取值

Other 其他

屬性名	取值	描述
opacity	<number>	對應 `CSS` `opacity` 屬性
overflow	`visible`, `hidden`, `scroll`	對應 `CSS` `overflow` 屬性，但閹割了 `auto` 取值
elevation ^Android	<number>	`CSS`中沒有對應的屬性，只在 `Android5.0+` 上有效
resizeMode	`cover`, `contain`, `stretch`	`CSS`中沒有對應的屬性，可以參考 `background-size` 屬性
overlayColor ^Android	string	`CSS`中沒有對應的屬性，當影像有圓角時，將角落都充滿一種顏色
tintColor ^iOS	<color>	`CSS`中沒有對應的屬性，`iOS` 影像上特殊的色彩，改變不透明畫素的顏色

Valuse 取值

Color 顏色

React Native 支援了 CSS 中大部分的顏色型別：

#f00 (#rgb)
#f00c (#rgba)：CSS 中無對應的值
#ff0000 (#rrggbb)
#ff0000cc (#rrggbbaa)：CSS 中無對應的值
rgb(255, 0, 0)
rgba(255, 0, 0, 0.9)
hsl(360, 100%, 100%)
hsla(360, 100%, 100%, 0.9)
transparent
0xff00ff00 (0xrrggbbaa)：CSS 中無對應的值
Color Name：支援了基本顏色關鍵字和擴充顏色關鍵字，但不支援 28個系統顏色；

Number 數值

在 React-Native 中，目前僅支援 Number 這一種長度取值。預設預設了 pt 單位，詳細請看 Units 單位部分。

Units 單位

Pt 點

在 React-Native 中，並不支援百分比單位，目前只支援一種單位，即 pt 絕對長度單位，同時，你在定義時不需要加單位，例如：

<View style={{width: 100, height: 50}}></View>
複製程式碼

var styles = StyleSheet.create({
    box: {
        width: 100,
        height: 50
    }
});
複製程式碼

PixelRatio 畫素密度

在 React-Native 中，訪問裝置畫素密度的方法由 PixelRatio 類提供。

我們的應用通常都會執行在不同的裝置上，並且這些裝置的畫素密度很有可能各不相同。這會造成一個現象就是：

定義了元素的邊框為 1畫素，而實際上在不同畫素密度的裝置上結果不一樣，比如：iPhone6 顯示為 2畫素，iPhone6 Plus 顯示為 3畫素；
對於一個圖片來講，因為裝置的畫素密度不同，它也需要對應不同尺寸的規則，以防止圖片過小變得模糊；

根據畫素密度指定邊框厚度

出於對產品體驗的一致性，我們會要求不論是在哪種裝置上，其邊框厚度都應該是相同的。一個取得物理上的相同邊框厚度的好方法就是用邏輯尺寸除以畫素密度比：

var styles = StyleSheet.create({
    box: {
        borderWidth: 1 / PixelRatio.get(),
        borderStyle: solid
    }
});
複製程式碼

上述程式碼將保證你的應用在所有的裝置上（畫素密度），都獲得 1畫素 的邊框厚度。PixelRatio 通過 get() 方法來返回裝置的畫素密度。

未完待續。。。