55_RN笔记12_RN中view标签的属性和样式

• 1，view标签的属性

  • view标签有很多的属性，具体查看https://reactnative.cn/docs/view/，style属性只是常用的；

• 2，view标签的style样式概况

  • View 的设计初衷是和 StyleSheet 搭配使用，这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。
  • 内联样式可以使用代码联想，StyleSheet不可用；可以先联想完，再一并写到StyleSheet中；
  • StyleSheet中多个样式可以使用拼接样式，用中括号；内联样式用大括号

• <View style={styles.container}>
          <View style={[styles.top, styles.border]}>
          </View>
          <View style={[styles.bottom, styles.border, {borderWidth: 5}]}>
          </View>
        </View>
  

   

• 3，view的style样式分类

  • 1，ViewStyle:view的边角样式

  • borderWidth//边框宽度，单方向设置为borderBottomWidth,borderTopWidth,borderLeftWidth,borderRightWidth 
    borderColor//边框颜色，单方向设置为borderBottomColor等 
    borderStyle//边框样式，单方向设置为borderBottomStyle等 
    borderRadius//圆角半径，单角设置为borderTopLeftRadius等

     

  • 2，FlexStyle：view的布局样式
    • 盒模型样式（后面详解）
    • 布局样式（后面详解）
  • 3，ShadowStyleIOS：iOS的阴影样式

  •  shadowColor?: string;//阴影颜色
     shadowOffset?: { width: number; height: number };//阴影偏移
     shadowOpacity?: number;//阴影不透明度
     shadowRadius?: number;//阴影圆角

     

  • 4，TransformsStyle：view的变换样式

• transform//变形属性值缩写
  translate//位移缩小
  translateX//X轴位移
  translateY//Y轴位移
  scale//缩放缩小
  scaleX//X轴缩放
  scaleY//Y轴缩放
  rotate//旋转缩小，rotateX，rotateY，rotateZ分别为单维度旋转

   

• 4，盒模型样式

  • margin//外边距，单方向内边距marginTop、marginLeft等
    marginVertical//top、bottom外边距
    marginHorizontal//left、right外边距
    height//高度
    width//宽度
    maxWidth//最大宽度
    maxHeight//最大高度
    padding//内边距，单方向内边距paddingLeft，paddingTop等
    paddingVertical//top、bottom内边距
    paddingHorizontal//left、right内边距
    
    backgroundColor//盒子背景色
    backfaceVisibility//盒子背面面向屏幕时是否可见
    overflow//溢出设置visible、hidden
    opacity//盒子透明度
    position//定位类型absolute、relative
    top//定位上坐标，left、right、bottom定位左、右、下坐标
    zIndex//定位权重

     

• 5，布局样式

  • /* 
    flex布局：
    1，flexDirection共有四个值，在RN中默认为column。
        row（默认值）：主轴为水平方向，从左向右。依次排列
        row-reverse：主轴为水平方向，从右向左依次排列
        column：主轴为垂直方向，默认的排列方式，从上向下排列
        column-reverse：主轴为垂直方向，从下向上排列
    
    2，flexWrap属性：决定子控件在父视图内是否允许多行排列。
        flexWrap共有两个值，默认为nowrap。
        nowrap 组件只排列在一行上，可能导致溢出。
        wrap   组件在一行排列不下时，就进行多行排列
    
    3，justifyContent属性:决定子组件在主轴中具体布局，是靠左，还是居中等
        justifyContent共有五个值，默认为flex-start
        flex-start: 子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。
        flex-end 子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。
        center 居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果
        space-between 均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。
        space-around 均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半
    
    4，alignItems:决定子组件在测轴中具体布局，决定子组件在上，还是下，或者居中
        alignItems共有四个值，默认为stretch。
        flex-start 子组件向侧轴起点对齐。
        flex-end 子组件向侧轴终点对齐。
        center 子组件在侧轴居中。
        stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
    
    5，alignSelf：自定义自己的侧轴布局，用于一个子组件设置。
    注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局。
        alignSelf共有五个值，默认为auto。
        auto 继承它的父容器的alignItems属性。如果没有父容器则为 "stretch"
        flex-start 子组件向侧轴起点对齐。
        flex-end 子组件向侧轴终点对齐。
        center 子组件在侧轴居中。
        stretch 子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
    
    6，flex：决定子控件在主轴中占据几等分。
    flex: 任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度.
    
    */