?這一步,再搞懂這幾步React Native才算入門
| 屬性名 | 取值 | 描述 |
|---|---|---|
| color | color | |
| fontFamily | string | |
| fontSize | number | |
| fontStyle |
normal, italic
|
|
| fontWeight |
normal, bold 100~900
|
|
| lineHeight | number | |
| textAlign |
auto, left, right, center, justifyiOS
|
當取值為 justify 時卒茬，在 Android 上會變?yōu)?left
|
| textDecorationLine |
none, underline, line-through, underline line-through
|
|
| textShadowColor | color | |
| textShadowOffset | { width:number, height:number } |
|
| textShadowRadius | number | |
includeFontPaddingAndroid
|
bool | Android在默認情況下會為文字額外保留一些padding秧耗，以便留出空間擺放上標或是下標的文字。對于某些字體來說钳降，這些額外的padding可能會導致文字難以垂直居中笨忌。如果你把textAlignVertical設置為center之后，文字看起來依然不在正中間，那么可以嘗試將本屬性設置為false |
textAlignVerticalAndroid
|
auto, top, bottom, center
|
|
fontVariantiOS
|
small-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums
|
|
letterSpacingiOS
|
number | |
textDecorationColoriOS
|
color | |
textDecorationStyleiOS
|
solid, double, dotted, dashed
|
|
writingDirectioniOS
|
auto, ltr, rtl
|
|
| width | number | |
| minWidth | number | |
| maxWidth | number | |
| height | number | |
| minHeight | number | |
| maxHeight | number | |
| position |
absolute, relative
|
|
| top | number | |
| right | number | |
| bottom | number | |
| left | number | |
| zIndex | number | 元素的堆疊順序 |
| margin | number | |
| marginHorizontal | number |
marginRight ? marginLeft
|
| marginVertical | number |
marginTop ? marginBottom
|
| marginTop | number | |
| marginRight | number | |
| marginBottom | number | |
| marginLeft | number | |
| padding | number | |
| paddingHorizontal | number |
paddingRight ? paddingLeft
|
| paddingVertical | number |
paddingTop ? paddingBottom
|
| paddingTop | number | |
| paddingRight | number | |
| paddingBottom | number | |
| paddingLeft | number | |
| borderStyle |
solid, dotted, dashed
|
|
| borderWidth | number | |
| borderTopWidth | number | |
| borderRightWidth | number | |
| borderBottomWidth | number | |
| borderLeftWidth | number | |
| borderColor | color | |
| borderTopColor | color | |
| borderRightColor | color | |
| borderBottomColor | color | |
| borderLeftColor | color | |
| borderRadius | number | |
| borderTopLeftRadius | number | |
| borderTopRightRadius | number | |
| borderBottomLeftRadius | number | |
| borderBottomRightRadius | number | |
| shadowColor | color | |
| shadowOffset | { width: number, height:number } |
|
| shadowRadius | number | |
| shadowOpacity | number | |
| backgroundColor | color | |
| 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}] |
|
| transformMatrix | TransformMatrixPropType |
|
| backfaceVisibility |
visible, hidden
|
|
| flex | number | 布局權重 |
| flexGrow | number | 設置或檢索彈性盒的擴展比率 |
| flexShrink | number | 將子元素寬度之和與父元素寬度的差值按照子元素 flex-shrink 的值分配給各個子元素凰浮，每個子元素原本寬度減去按比例分配的值，其剩余值為實際寬度苇本。 |
| flexBasis | number | 設置或檢索彈性盒伸縮基準值 |
| flexDirection |
row, row-reverse, column, column-reverse
|
|
| flexWrap |
wrap, nowrap
|
|
| justifyContent |
flex-start, flex-end, center, space-between, space-around
|
|
| alignItems |
flex-start, flex-end, center, stretch
|
|
| alignSelf |
auto, flex-start, flex-end, center, stretch
|
Other 其他
| 屬性名 | 取值 | 描述 |
|---|---|---|
| opacity | number | 不透明度 |
| overflow |
visible, hidden, scroll
|
當內(nèi)容溢出元素框時發(fā)生的事情 |
elevationAndroid
|
number | 只在 Android5.0+ 上有效 |
| resizeMode |
cover, contain, stretch
|
|
overlayColorAndroid
|
string | 當圖像有圓角時袜茧，將角落都充滿一種顏色 |
tintColoriOS
|
color |
iOS 圖像上特殊的色彩，改變不透明像素的顏色 |
Color 顏色
React Native 支持了 CSS 中大部分的顏色類型：
-
#f00(#rgb) -
#f00c(#rgba)： -
#ff0000(#rrggbb) -
#ff0000cc(#rrggbbaa)： rgb(255, 0, 0)rgba(255, 0, 0, 0.9)hsl(360, 100%, 100%)hsla(360, 100%, 100%, 0.9)transparent-
0xff00ff00(0xrrggbbaa)： -
Color Name：支持了 基本顏色關鍵字 和 拓展顏色關鍵字瓣窄，但不支持 28個系統(tǒng)顏色笛厦；
