flex number
用于设置或检索弹性盒模型对象的子元素如何分配空间
flexDirection enum('row', 'row-reverse' ,'column','column-reverse')
flexDirection属性决定主轴的方向，默认是“column”：
- row：主轴为水平方向，起点在左端
- row-reverse：主轴为水平方向，起点在右端
- column(默认值)：主轴为垂直方向，起点在上沿
- column-reverse：主轴为垂直方向，起点在下沿
flexWrap enum('wrap', 'nowrap')
轴线，wrap换行展示，nowrap不换行（可能会显示不全）；
justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
- justifyContent属性定义了项目在主轴上的对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center： 居中
- space-between：两端对齐，项目之间的间隔都相等
- space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
- align-items属性定义项目在交叉轴上如何对齐
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值。
图片相关
resizeMode enum('cover', 'contain', 'stretch')
- cover：裁剪展示
- stretch：拉伸展示
- contain：原图展示
overflow enum('visible', 'hidden') 超出部分是否显示，hidden为隐藏
tintColor 着色，rgb字符串类型
opacity 透明度
边框宽度
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- borderColor
边框颜色
- borderBottomColor
- borderLeftColor
- borderRightColor
- borderTopColor
- borderColor
外边距
- marginBottom
- marginLeft
- marginRight
- marginTop
- marginVertical
- marginHorizontal
- margin
内边距
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- paddingVertical
- paddingHorizontal
- padding
边框圆角
- borderTopLeftRadius
- borderTopRightRadius
- borderBottomLeftRadius
- borderBottomRightRadius
- borderRadius
阴影
- shadowColor
- shadowOffset
- shadowOpacity
- shadowRadius
布局
position
- absolute
- relative
left/top/right/bottom 距“左/上/右/下”N个单位
|
1
2
3
4
5
6
7
|
box:{
width
:
50
,
height
:
50
,
backgroundColor:
'#f00'
,//红色
position :
'absolute'
,
left
:
30
,//左边距离屏幕左侧
30
单位
}
|
获取当前屏幕宽、高
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
import
{ Dimensions } from
'react-native'
;
var
{ width, height, scale } = Dimensions.get(
'window'
);
render() {
return
(
<View>
<Text>
屏幕的宽度：{width +
'\n'
}
屏幕的高度：{height +
'\n'
}
</Text>
</View>
);
}
|
本文转自王磊的博客博客园博客，原文链接：http://www.cnblogs.com/vipstone/p/7596823.html，如需转载请自行联系原作者
