ReactNative样式总览

边框:

1
2
3
4
5
6
颜色
borderColor: color
borderBottomColor: color
borderLeftColor: color
borderTopColor: color
borderRightColor: color
1
2
3
4
5
6
圆角
borderRadius: number
borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number
1
2
3
4
5
6
7
8
宽度
borderWidth: number
borderBottomWidth: number
borderLeftWidth: number
borderRightWidth: number
borderTopWidth: number
样式
borderStyle: enum('solid', 'dotted', 'dashed')

边距:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
内边距
padding: number
paddingBottom: number
paddingLeft: number
paddingRight: number
paddingTop: number
paddingHorizontal: number (左右内边距)
paddingVertical: number (上下内边距)
外边距
margin: number
marginBottom: number
marginLeft: number
marginRight: number
marginTop: number
marginHorizontal: number (左右内边距)
marginVertical: number (上下外边距)

文字

1
2
3
4
5
6
7
8
9
10
11
color: color
fontFamily: string
fontSize: number
fontStyle: enum('normal', 'italic')
fontWeight: enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
textDecorationColor: color (文本修饰颜色)
textDecorationLine: enum('none', 'underline', 'line-through', 'underline line-through')
textDecorationStyle: enum('solid', 'double', 'dashed', 'dotted')
letterSpacing: number
lineHeight:number
textAlign: enum('auto', 'left', 'right', 'center', 'justify')

布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
backgroundColor: color
flex: number
flexDirection: enum('row', 'row-reverse', 'column', 'column-reverse')
flexWrap: enum('wrap', 'nowrap')
justifyContent: enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
alignItems: enum('flex-start', 'flex-end', 'center', 'stretch')
alignSelf: enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
position: enum('absolute', 'relative')
right: number
left: number
top: number
bottom: number
width: number
height: number

图形变换

1
2
3
4
5
scaleX:水平方向缩放
scaleY:垂直方向缩放
rotation:旋转
translateX:水平方向平移
translateY:水平方向平移

阴影

说个悲惨的故事,阴影只能在ios用

1
2
3
4
shadowColor: color
shadowOffset: {width: number, height: number}
shadowOpacity: number
shadowRadius: number

×

谢谢你请我吃辣条

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 边框:
  2. 2. 边距:
  3. 3. 文字
  4. 4. 布局
  5. 5. 图形变换
  6. 6. 阴影
    1. 6.0.1. 说个悲惨的故事,阴影只能在ios用
,