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个单位
box:{
width:50,
height:50,
backgroundColor:'#f00',//红色
position :'absolute',
left:30,//左边距离屏幕左侧30单位
}
获取当前屏幕宽、高
import { Dimensions } from 'react-native';
var { width, height, scale } = Dimensions.get('window');
render() {
return (
<View>
<Text>
屏幕的宽度:{width + '\n'}
屏幕的高度:{height + '\n'}
</Text>
</View>
);
}