reactnative的css布局和web中css布局区别及介绍

前言

本文主要介绍一下 reactnative 布局相关知识，列举一下 web 端布局和 rn 布局的一些区别。在 React Native 中布局采用的是 FleBox(弹性框) 进行布局。

FlexBox 提供了在不同尺寸设备上都能保持一致的布局方式。FlexBox 是 CSS3 弹性框布局规范，并不是所有的浏览器都支持 Flexbox。但大家在做 React Native 开发时大可不必担心 FlexBox 的兼容性问题，因为既然 React Native 选择用 FlexBox 布局，那么 React Native 对 FlexBox 的支持自然会做的很好。

宽和高

在学习 FlexBox 之前首先要清楚一个概念“宽和高”。一个组件的高度和宽度决定了它在屏幕上的尺寸，也就是大小。
在 web 端，我们讲究的是流式布局，有块级元素和行内元素的概念，但是在 rn 中没有这个概念，一个元素不指定宽高，那么就展示不出来。

像素无关

在 React Native 中尺寸是没有单位的，它代表了设备独立像素。

         尺寸 

上述代码，运行在 Android 上时，View 的长和宽被解释成：100dp 100dp 单位是 dp，字体被解释成 16sp 单位是 sp，运行在 iOS 上时尺寸单位被解释称了 pt，这些单位确保了布局在任何不同 dpi 的手机屏幕上显示不会发生改变；

和而不同

值得一提的是，React Native 中的 FlexBox 和 Web CSSS 上 FlexBox 工作方式是一样的。但有些地方还是有些出入的，如：

React Native 中的 FlexBox 和 Web CSSS 上 FlexBox 的不同之处

• flexDirection: React Native 中默认为 flexDirection:'column'，在 Web CSS 中默认为 flex-direction:'row'
• alignItems: React Native 中默认为 alignItems:'stretch'，在 Web CSS 中默认 align-items:'flex-start'
• flex: 相比 Web CSS 的 flex 接受多参数，如:flex: 2 2 10%;，但在 React Native 中 flex 只接受一个参数
• 不支持属性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink

以上是 React Native 中的 FlexBox 和 Web CSSS 上 FlexBox 的不同之处，记住这几点，你可以像在 Web CSSS 上使用 FlexBox 一样，在 React Native 中使用 FlexBox。

flex 布局方式介绍

首先我们介绍父容器属性；

父视图属性有如下 (容器属性)：

• flexDirection enum(‘row’, ‘column’,’row-reverse’,’column-reverse’)
• flexWrap enum(‘wrap’, ‘nowrap’)
• justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)

• alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

  flexDirection

  flexDirection enum('row', 'column','row-reverse','column-reverse')`  
  flexDirection` 属性定义了父视图中的子元素沿横轴或侧轴方片的排列方式。row: 从左向右依次排列
  row-reverse: 从右向左依次排列
  column(default): 默认的排列方式，从上向下排列
  column-reverse: 从下向上排列 

Usage:

    
    1
  
  
    2
  
  
    3
  
  
    4
  
  

flexWrap

 flexWrap enum('wrap', 'nowrap')`  
 flexWrap` 属性定义了子元素在父视图内是否允许多行排列，默认为 nowrap。nowrap flex 的元素只排列在一行上，可能导致溢出。wrap flex 的元素在一行排列不下时，就进行多行排列。

Usage:

···

justifyContent

 justifyContent enum('flex-start', 'flex-end', 'center',
'space-between', 'space-around')  
 justifyContent` 属性定义了浏览器如何分配顺着父容器主轴的弹性（flex）元素之间及其周围的空间，默认为 flex-start。flex-start(default) 从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。flex-end 从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。center 伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

Usage:

···

alignItems

 alignItems enum('flex-start', 'flex-end', 'center', 'stretch')`  
 alignItems` 属性以与 justify-content 相同的方式在侧轴方向上将当前行上的弹性元素对齐，默认为 stretch。flex-start 元素向侧轴起点对齐。flex-end 元素向侧轴终点对齐。center 元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。stretch 弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。

Usage:

···

子视图属性

• alignSelf enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
• flex number

alignSelf

 alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')`
alignSelf` 属性以属性定义了 flex 容器内被选中项目的对齐方式。注意：alignSelf 属性可重写灵活容器的 alignItems
 属性。auto(default) 元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。stretch    元素被拉伸以适应容器。center    元素位于容器的中心。flex-start    元素位于容器的开头。flex-end    元素位于容器的结尾。

Usage:

   1

...

flex

flex number`

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

Usage:

  
    flex:1
  
  
    flex:2
  
  
    flex:3
            

其他布局 in React Native

以下属性是 React Native 所支持的除 Flex 以外的其它布局属性。

视图边框

• borderBottomWidth number 底部边框宽度
• borderLeftWidth number 左边框宽度
• borderRightWidth number 右边框宽度
• borderTopWidth number 顶部边框宽度
• borderWidth number 边框宽度
• borderColor 个方向边框的颜色
• borderColor 边框颜色

尺寸

• width number
• height number

外边距

• margin number 外边距
• marginBottom number 下外边距
• marginHorizontal number 左右外边距
• marginLeft number 左外边距
• marginRight number 右外边距
• marginTop number 上外边距
• marginVertical number 上下外边距

内边距

• padding number 内边距
• paddingBottom number 下内边距
• paddingHorizontal number 左右内边距
• paddingLeft number 做内边距
• paddingRight number 右内边距
• paddingTop number 上内边距
• paddingVertical number 上下内边距

边缘

• left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
• right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移
• top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
• bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

定位 (position)

position enum(‘absolute’, ‘relative’) 属性设置元素的定位方式，为将要定位的元素定义定位规则。

• absolute：生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
• relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20″ 会向元素的 LEFT 位置添加 20 像素。

备注

本文部分内容，转载 github 上面 react-native 布局详情