布局寫法
外聯(lián)布局：style={styles.container}
內(nèi)聯(lián)布局：style={{flex:1,width:50,height:100}}
多個(gè)布局：style={[styles.container,{width:50,height:100}]}
# React-Native 樣式指南
React-Native 的樣式基本上是實(shí)現(xiàn)了 CSS 的一個(gè)子集辛润，并且屬性名不完全一致片习，所以當(dāng)你開始在編寫 React-Native 之前榴芳，可以先簡(jiǎn)要了解一下鼠证。
Properties 屬性
Text 文本
| 屬性名 |
取值 |
描述 |
| color |
<color> |
對(duì)應(yīng) CSS 中的 color 屬性 |
| fontFamily |
string |
對(duì)應(yīng) CSS 中的 font-family 屬性 |
| fontSize |
<number> |
對(duì)應(yīng) CSS 中的 font-size 屬性 |
| fontStyle |
normal, italic
|
對(duì)應(yīng) CSS 中的 font-style 屬性朽缎，但閹割了 oblique取值 |
| fontWeight |
normal, bold``100~900
|
對(duì)應(yīng) CSS 中的 font-weight 屬性悯恍，但閹割了 bolder, lighter 取值 |
| lineHeight |
<number> |
對(duì)應(yīng) CSS 中的 line-height 屬性 |
| textAlign |
auto, left, right, center, justifyiOS
|
對(duì)應(yīng) CSS 中的 text-align 屬性薄翅，增加了 auto 取值 |
textAlignVerticalAndroid
|
auto, top, bottom, center
|
對(duì)應(yīng) CSS 中的 vertical-align 屬性，增加了 auto 取值舷丹，center 取代了 middle抒钱，并閹割了 baseline, sub等值 |
| textShadowColor |
<color> |
對(duì)應(yīng) CSS 中的 text-shadow 屬性中的顏色定義 |
| textShadowOffset |
{ |
width: <number>,
height: <number>
} | 對(duì)應(yīng) CSS 中的 text-shadow 屬性中的陰影偏移定義 |
| textShadowRadius | <number> | 在 CSS 中，陰影的圓角大小取決于元素的圓角定義颜凯，不需要額外定義 |
| letterSpacingiOS | <number> | 對(duì)應(yīng) CSS 中的 letter-spacing 屬性谋币，但取值不同 |
| textDecorationColoriOS | <color> | 對(duì)應(yīng) CSS 中的 text-decoration-color 屬性 |
| textDecorationLineiOS | none, underline, line-through, underline line-through | 對(duì)應(yīng) CSS 中的 text-decoration-line 屬性，但閹割了 overline, blink 取值 |
| textDecorationStyleiOS | solid, double, dotted, dashed | 對(duì)應(yīng) CSS 中的 text-decoration-style 屬性症概，但閹割了 wavy 取值 |
| writingDirectioniOS | auto, ltr, rtl | 對(duì)應(yīng) CSS 中的 direction 屬性蕾额，增加了 auto 取值 |
Dimension 尺寸
| 屬性名 |
取值 |
描述 |
| width |
<number> |
對(duì)應(yīng) CSS 中的 width 屬性 |
| height |
<number> |
對(duì)應(yīng) CSS 中的 height 屬性 |
Positioning 定位
| 屬性名 |
取值 |
描述 |
| position |
absolute, relative
|
對(duì)應(yīng) CSS 中的 position 屬性，但閹割了 static, fixed 取值 |
| top |
<number> |
對(duì)應(yīng) CSS 中的 top 屬性 |
| right |
<number> |
對(duì)應(yīng) CSS 中的 right 屬性 |
| bottom |
<number> |
對(duì)應(yīng) CSS 中的 bottom 屬性 |
| left |
<number> |
對(duì)應(yīng) CSS 中的 left 屬性 |
Margin 外部白
| 屬性名 |
取值 |
描述 |
| margin |
<number> |
對(duì)應(yīng) CSS 中的 margin 屬性彼城，不同的是诅蝶，只能定義一個(gè)參數(shù)，用以表示上募壕、右调炬、下、左4個(gè)方位的外補(bǔ)白 |
| marginHorizontal |
<number> |
CSS中沒有對(duì)應(yīng)的屬性司抱，相當(dāng)于同時(shí)設(shè)置marginRight和marginLeft |
| marginVertical |
<number> |
CSS中沒有對(duì)應(yīng)的屬性筐眷，相當(dāng)于同時(shí)設(shè)置marginTop和marginBottom |
| marginTop |
<number> |
對(duì)應(yīng) CSS 中的 margin-top 屬性 |
| marginRight |
<number> |
對(duì)應(yīng) CSS 中的 margin-right 屬性 |
| marginBottom |
<number> |
對(duì)應(yīng) CSS 中的 margin-bottom 屬性 |
| marginLeft |
<number> |
對(duì)應(yīng) CSS 中的 margin-left 屬性 |
Padding 內(nèi)部白
| 屬性名 |
取值 |
描述 |
| padding |
<number> |
對(duì)應(yīng) CSS 中的 padding 屬性黎烈，不同的是习柠，只能定義一個(gè)參數(shù)匀谣，用以表示上、右资溃、下武翎、左4個(gè)方位的內(nèi)補(bǔ)白 |
| paddingHorizontal |
<number> |
CSS中沒有對(duì)應(yīng)的屬性，相當(dāng)于同時(shí)設(shè)置paddingRight和paddingLeft |
| paddingVertical |
<number> |
CSS中沒有對(duì)應(yīng)的屬性溶锭，相當(dāng)于同時(shí)設(shè)置paddingTop和paddingBottom |
| paddingTop |
<number> |
對(duì)應(yīng) CSS 中的 padding-top 屬性 |
| paddingRight |
<number> |
對(duì)應(yīng) CSS 中的 padding-right 屬性 |
| paddingBottom |
<number> |
對(duì)應(yīng) CSS 中的 padding-bottom 屬性 |
| paddingLeft |
<number> |
對(duì)應(yīng) CSS 中的 padding-left 屬性 |
Border 邊框
| 屬性名 |
取值 |
描述 |
| borderStyle |
solid, dotted, dashed
|
對(duì)應(yīng) CSS 中的 border-style 屬性宝恶，但閹割了 none, hidden, double, groove, ridge, inset, outset 取值，且無方向分拆屬性 |
| borderWidth |
<number> |
對(duì)應(yīng) CSS 中的 border-width 屬性 |
| borderTopWidth |
<number> |
對(duì)應(yīng) CSS 中的 border-top-width 屬性 |
| borderRightWidth |
<number> |
對(duì)應(yīng) CSS 中的 border-right-width 屬性 |
| borderBottomWidth |
<number> |
對(duì)應(yīng) CSS 中的 border-bottom-width 屬性 |
| borderLeftWidth |
<number> |
對(duì)應(yīng) CSS 中的 border-left-width 屬性 |
| borderColor |
<color> |
對(duì)應(yīng) CSS 中的 border-color 屬性 |
| borderTopColor |
<color> |
對(duì)應(yīng) CSS 中的 border-top-color 屬性 |
| borderRightColor |
<color> |
對(duì)應(yīng) CSS 中的 border-right-color 屬性 |
| borderBottomColor |
<color> |
對(duì)應(yīng) CSS 中的 border-bottom-color 屬性 |
| borderLeftColor |
<color> |
對(duì)應(yīng) CSS 中的 border-left-color 屬性 |
| borderRadius |
<number> |
對(duì)應(yīng) CSS 中的 border-radius 屬性 |
| borderTopLeftRadius |
<number> |
對(duì)應(yīng) CSS 中的 border-top-left-radius 屬性 |
| borderTopRightRadius |
<number> |
對(duì)應(yīng) CSS 中的 border-top-right-radius 屬性 |
| borderBottomLeftRadius |
<number> |
對(duì)應(yīng) CSS 中的 border-bottom-left-radius 屬性 |
| borderBottomRightRadius |
<number> |
對(duì)應(yīng) CSS 中的 border-bottom-right-radius 屬性 |
| shadowColor |
<color> |
對(duì)應(yīng) CSS 中的 box-shadow 屬性中的顏色定義 |
| shadowOffset |
{ |
width: <number>,
height: <number>
} | 對(duì)應(yīng) CSS 中的 box-shadow 屬性中的陰影偏移定義 |
| shadowRadius | <number> | 在 CSS 中趴捅，陰影的圓角大小取決于元素的圓角定義垫毙，不需要額外定義 |
| shadowOpacity | <number> | 對(duì)應(yīng) CSS 中的 box-shadow 屬性中的陰影透明度定義 |
Background 背景
| 屬性名 |
取值 |
描述 |
| backgroundColor |
<color> |
對(duì)應(yīng) CSS 中的 background-color 屬性 |
Transform 轉(zhuǎn)換
| 屬性名 |
取值 |
描述 |
| 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}] |
對(duì)應(yīng) CSS 中的 transform 屬性 |
| transformMatrix |
TransformMatrixPropType |
類似于 CSS 中 transform 屬性的 matrix() 和 matrix3d() 函數(shù) |
| backfaceVisibility |
visible, hidden
|
對(duì)應(yīng) CSS 中的 backface-visibility 屬性 |
Flexbox 彈性盒
| 屬性名 |
取值 |
描述 |
| flex |
<number> |
對(duì)應(yīng) CSS 中的 flex 屬性 |
| flexDirection |
row, column
|
對(duì)應(yīng) CSS 中的 flex-direction 屬性，但閹割了 row-reverse, column-reverse 取值 |
| flexWrap |
wrap, nowrap
|
對(duì)應(yīng) CSS 中的 flex-wrap 屬性拱绑，但閹割了 wrap-reverse 取值 |
| justifyContent |
flex-start, flex-end, center, space-between, space-around
|
對(duì)應(yīng) CSS 中的 justify-content 屬性综芥，但閹割了 stretch 取值。 |
| alignItems |
flex-start, flex-end, center, stretch
|
對(duì)應(yīng) CSS 中的 align-items 屬性猎拨，但閹割了 baseline 取值膀藐。 |
| alignSelf |
auto, flex-start, flex-end, center, stretch
|
對(duì)應(yīng) CSS 中的 align-self 屬性，但閹割了 baseline 取值 |
Other 其他
| 屬性名 |
取值 |
描述 |
| opacity |
<number> |
對(duì)應(yīng) CSS 中的 opacity 屬性 |
| overflow |
visible, hidden
|
對(duì)應(yīng) CSS 中的 overflow 屬性红省，但閹割了 scroll, auto 取值 |
elevationAndroid
|
<number> |
CSS中沒有對(duì)應(yīng)的屬性额各，只在 Android5.0+ 上有效 |
| resizeMode |
cover, contain, stretch
|
CSS中沒有對(duì)應(yīng)的屬性，可以參考 background-size 屬性 |
overlayColorAndroid
|
string |
CSS中沒有對(duì)應(yīng)的屬性吧恃，當(dāng)圖像有圓角時(shí)虾啦，將角落都充滿一種顏色 |
tintColoriOS
|
<color> |
CSS中沒有對(duì)應(yīng)的屬性，iOS 圖像上特殊的色彩蚜枢，改變不透明像素的顏色 |
Valuse 取值
Color 顏色
React-Native 支持了 CSS 中大部分的顏色類型：
-
#f00 (#rgb)
-
#f00c (#rgba)：CSS 中無對(duì)應(yīng)的值
-
#ff0000 (#rrggbb)
-
#ff0000cc (#rrggbbaa)：CSS 中無對(duì)應(yīng)的值
rgb(255, 0, 0)rgba(255, 0, 0, 0.9)hsl(360, 100%, 100%)hsla(360, 100%, 100%, 0.9)transparent-
Color Name：支持了 基本顏色關(guān)鍵字 和 拓展顏色關(guān)鍵字缸逃，但不支持 28個(gè)系統(tǒng)顏色；
Number 數(shù)值
在 React-Native 中厂抽，目前僅支持 Number 這一種長(zhǎng)度取值需频。默認(rèn)缺省了 pt 單位，詳細(xì)請(qǐng)看 Units 單位 部分筷凤。
Units 單位
Pt 點(diǎn)
在 React-Native 中昭殉，并不支持百分比單位，目前只支持一種單位藐守，即 pt 絕對(duì)長(zhǎng)度單位挪丢，同時(shí)，你在定義時(shí)不需要加單位卢厂，例如：
<View style={{width: 100, height: 50}}></View>
var styles = StyleSheet.create({
box: {
width: 100,
height: 50
}
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
