react-native学习---react-native布局

• Z时代
• 2024-01-10
• 分类：综合

学而时习之,不亦乐乎

react-native中布局采用的是FlexBox(弹性框)进行布局

在react-native 布局中需要注意的是：

1.在react-native中的尺寸是没有单位的（android设备中尺寸单位解释为sp,ios中解释为pt,代表设备独立像素）

2.在react-native中css 与web端css基本相同，但有少许不同之处

#flexDirection

flecDirection ：定义父视图中子元素的排列方式

• row: 从左向右依次排列
• row-reverse: 从右向左依次排列
• column(default): 默认的排列方式，从上向下排列
• column-reverse: 从下向上排列

#flexWrap

flexWrap 定义了子元素在父元素中是否允许多行排列

• nowrap flex的元素只排列在一行上，可能导致溢出。
• wrap flex的元素在一行排列不下时，就进行多行排列。

#justifyContent

justifyContent 定义了子元素沿父视图水平方向主轴的分布规则

• flex-start(default)
• flex-end
• center
• space-between
• space-around(每行第一个元素到行首的距离是元素间距的一半，最后一个元素也是如此)
  
  #alignItems
  

  alignItems 定义了子元素在父视图沿侧轴（垂直线）的分布规则

• flex-start
• flex-end
• center
• stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
  
  #alignSelf
  

  alignSelf 定义了被选中项目的对齐方式 **alignSelf 属性可重写灵活容器的 alignItems 属性。
  

  auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
  

  stretch 元素被拉伸以适应容器。
  

  center
  

  flex-start
  

  flex-end
  
  #flex number
  

  flex 属性定义了一个可伸缩元素的能力，默认为0。

以上是 react-native学习---react-native布局 的全部内容， 来源链接： utcz.com/z/383729.html