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>

  );

}

秒客网

ReactNative布局样式总结

相关文章