ReactNative布局样式总结

骑猪看日落 2023-10-17 21:03 89阅读 0赞

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