➕这一步,再搞懂这几步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 上会变为 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
|
当内容溢出元素框时发生的事情 |
elevationAndroid
|
number | 只在 Android5.0+ 上有效 |
| resizeMode |
cover, contain, stretch
|
|
overlayColorAndroid
|
string | 当图像有圆角时，将角落都充满一种颜色 |
tintColoriOS
|
color |
iOS 图像上特殊的色彩，改变不透明像素的颜色 |
Color 颜色
React Native 支持了 CSS 中大部分的颜色类型：
