ReactNative布局样式总结

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个单位

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>
  );
}