更新时间:2022-09-13 19:18:17
flex number
用于设置或检索弹性盒模型对象的子元素如何分配空间
flexDirection enum('row', 'row-reverse' ,'column','column-reverse')
flexDirection属性决定主轴的方向,默认是“column”:
flexWrap enum('wrap', 'nowrap')
轴线,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')
alignSelf决定了元素在父元素的次轴方向的排列方式(此样式设置在子元素上),其值会覆盖父元素的alignItems的值。
图片相关
resizeMode enum('cover', 'contain', 'stretch')
overflow enum('visible', 'hidden') 超出部分是否显示,hidden为隐藏
tintColor 着色,rgb字符串类型
opacity 透明度
边框宽度
边框颜色
外边距
内边距
边框圆角
阴影
布局
position
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,如需转载请自行联系原作者