对于一个非前端来说，一些样式在应用时随手写起来还是有点困难，所以把一些常用的样式抄下来，这样在写react-native 的时候我能快速找到
View Style
- 支持Flexbox、ShadowPropTypesIOS、Transforms属性。
背面可见性
enum('visible', 'hidden')```
backgroundColor string
borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
1
2
| ##### 边框样式
```borderStyle enum('solid', 'dotted', 'dashed')
|
边框宽度
1
2
3
4
5
| borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number
|
不透明度
number```1
2
| ##### 填充
```overflow enum('visible', 'hidden')
|
测试ID（用来定位视图）
string```1
2
3
4
5
6
7
|
---
#### Image Style
- 支持Flexbox和Transforms
##### 调整大小模式
```resizeMode Object.keys(ImageResizeMode)
|
背景颜色
string```
borderColor string
borderWidth number
borderRadius number
1
2
| ##### 填充
```overflow enum('visible', 'hidden')
|
色彩颜色
string```1
2
| ##### 不透明度
```opacity number
|
Text Style
- 支持View的样式
字体颜色
string```1
2
| ##### 字体
```fontFamily string
|
字体大小
number```1
2
| ##### 字体样式
```fontStyle enum('normal', 'italic')
|
字体粗细（指定字体的粗细。大多数字体都支持’normal’和’bold’值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。）
enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')```1
2
| ##### 字间距
```letterSpacing number
|
行间距
number```1
2
| ##### 字体对齐方式（指定文本的对齐方式。其中’justify’值仅iOS支持。）
```textAlign enum("auto", 'left', 'right', 'center', 'justify')
|
Flexbox Style
宽高
1
2
| width number
height number
|
项目对齐
enum('flex-start', 'flex-end', 'center', 'stretch')```1
2
| ##### 自身对齐
```alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
|
边框宽度
1
2
3
4
5
| borderBottomWidth number
borderLeftWidth number
borderRightWidth number
borderTopWidth number
borderWidth number
|
弹性伸缩
number```1
2
| ##### 弹性伸缩方向
```flexDirection enum('row', 'column')
|
弹性伸缩包裹
enum('wrap', 'nowrap')```1
2
| ##### 证明内容
```justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
|
外边距
1
2
3
4
5
6
7
| margin number
marginBottom number
marginLeft number
marginRight number
marginTop number
marginHorizontal number
marginVertical number
|
内边距
1
2
3
4
5
6
7
| padding number
paddingBottom number
paddingLeft number
paddingRight number
paddingTop number
paddingHorizontal number
paddingVertical number
|
位置（绝对、相对）
enum('absolute', 'relative')```
right number
top number
left number
bottom number
Transform
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}]
1
2
| ##### 属性矩阵
```transformMatrix TransformMatrixPropType
|
参考