React Native 样式布局基础知识

通过此篇笔记能够学习到如下的几个知识点

• 在 React Native 中使用样式的一些细节
• 了解 React Native 的 Flex 布局概念
• 了解 React Native 的 flex 布局属性
• React Native 如何添加多样式属性
• React Native 中绝对布局和相对布局

React Native 中的 Flex 布局概念

1、主轴和交叉轴

在 Flex 布局中存在主轴和交叉轴的概念，主轴和交叉轴的关系如同 X 轴和 Y 轴的关系。在 Flex 布局中是使用 flexDirection 来定义主轴和交叉轴的方向。

• flexDirection: row | row-reverse | column | column-reverse

当 flexDirection 的值为row或者row-reverse时，主轴和交叉轴的关系如下图：

当 flexDirection 的值为 column或者 column-reverse时，主轴和交叉轴的关系如下图：

2、x-reverse 属性说明

当 flexDirection 的属性值为row-reverse时，元素的排列表顺序是从右到左的顺序依次排序。

当 flexDirection 的属性值为column-reverse时，元素的排列表顺序是从下到上的顺序依次排序。

Flex 容器对齐方式

Flex 容器中的元素对齐是跟主轴和交叉轴有关。其中 alignItems 属性主要是在交叉轴上对齐，而 justifyContent 属性主要是在主轴上对齐。

• justifyContent 控制主轴（横轴）上所有 flex 项目的对齐。（以下实例都是按照flexDirection: 'row'为基础来设置参数）

  • flex-start flex 项目的开始端的对齐

  具体布局实例如下：
  

  • flex-end flex 项目的结束端对齐

  具体布局实例如下：
  

  • center flex 项目居中对齐

  具体布局实例如下：
  

  • space-between flex 项目两端对齐且项目间隔均等（左右两端无空隙）

  具体布局实例如下：

• space-around flex 项目间隔均等分

具体布局实例如下：

• space-evenly flex 项目间隔均等分，此属性与 space-around 的不同之处是在于，此值是所有空间都是均等的，而 spance-around 左右两端并不是空间均等而是元素的一半

具体布局实例如下：

• alignItems 控制交叉轴（纵轴）上所有 flex 项目的对齐。（以下实例都是按照flexDirection: 'column'为基础来设置参数）

  基础样式代码：

   container: {
    flexDirection: 'column',
    alignItems: ''
  },
  card: {
    height: 100,
    marginHorizontal: 8,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardOne: {
    width: 100,
    backgroundColor: '#EF5354'
  },
  cardTwo: {
    width: 100,
    backgroundColor: '#50DBB4'
  },
  cardThree: {
    width: 'auto',
    backgroundColor: '#5DA3FA'
  },
  textWhite: {
    color: '#FFFFFF'
  }
  

  • flex-start flex 项目的开始端的对齐

  具体布局实例如下：
  

  • flex-end flex 项目的结束端对齐

  具体布局实例如下：
  

  • center flex 项目居中对齐

  具体布局实例如下：
  

  • stretch flex 项目撑满 flex 容器，当元素设置了高度后，元素的高度只会按照设置的高度来
    
  • baseline flex 项目的基线对齐

  具体布局实例如下：
  

• alignSelf 控制交叉轴（纵轴）上的单个 flex 项目的对齐。此属性设置在子元素上才会有效果。属性值跟 align-items 一样。

• alignContent 控制“多条主轴”的 flex 项目在交叉轴的对齐。属性值与 justifyContent 一样。

Flex 容器排序设置

• flexWrap：设置 Flex 容器的子元素总宽度大于 Flex 容器的宽度时子元素的呈现方式。取值有 nowrap、wrap、wrap-reverse。

  • nowrap 当子元素总宽度超出时溢出容器
  • wrap 当子元素总宽度超出时元素会折行并且从左到右排序，具体实例如下：
    

Flex 子元素大小设置

• flexGrow：设置子元素所占容器的比例

  等分所有元素实例：

  container: {
    flexDirection: 'row'
  },
  card: {
    flexGrow: 1,
    height: 100,
    margin: 8,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  

  12 栏切分为 3、3、6 的比例：

  container: {
    flexDirection: 'row'
  },
  card: {
    height: 100,
    margin: 8,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  

• flexBasis：为元素设置最小宽度，当父子元素都设置了此属性，子元素的优先级最高。

  为元素设置最小宽度为 60：

  card: {
    height: 100,
    margin: 8,
    flexBasis: 60,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  

• flexShrink：元素的收缩比例，数值越大的话，收缩的比例越大。具体实例如下：

  card: {
    height: 100,
    margin: 8,
    borderRadius: 5,
    justifyContent: 'center',
    alignItems: 'center',
  },
  cardOne: {
    flexBasis: 'auto',
    backgroundColor: '#EF5354',
    flexShrink: 0
  },
  cardTwo: {
    flexBasis: 300,
    backgroundColor: '#50DBB4',
    flexShrink: 13
  },
  cardThree: {
    flexBasis: 300,
    backgroundColor: '#5DA3FA',
    flexShrink: 55
  },
  

Flex 行间距和列间距

在 Flex 中间距的设置主要是通过如下三个属性来设置：

• rowGap 设置元素行之间的间隙
• columnGap 设置元素列之间的间隙
• gap 设置元素行/列之间的间隙

具体实例如下：

container: {
  flexDirection: 'row',
  rowGap: 8,
  columnGap: 8
},
card: {
  flex: 1,
  height: 100,
  borderRadius: 5,
  justifyContent: 'center',
  alignItems: 'center',

},
cardOne: {
  backgroundColor: '#EF5354',
},
cardTwo: {
  backgroundColor: '#50DBB4',
},
cardThree: {
  backgroundColor: '#5DA3FA',
},

绝对定位和相对定位

position 属性类型定义了它在其父元素中的定位方式。

• relative（默认值）默认情况下，元素是相对定位的。top 这意味着元素根据布局的正常流程定位，然后根据、right、bottom 和的值相对于该位置进行偏移 left。偏移量不会影响任何同级或父元素的位置。具体实例如下：

card: {
  width: 100,
  height: 100,
  borderRadius: 5,
  justifyContent: 'center',
  alignItems: 'center',
},
cardOne: {
  backgroundColor: '#EF5354',
  top: 20,
  left: 20
},
cardTwo: {
  backgroundColor: '#50DBB4',
  top: 20,
  left: 40
},
cardThree: {
  backgroundColor: '#5DA3FA',
  top: 20,
  left: 60
},
textWhite: {
  color: '#FFFFFF'
}

运行效果如下：

• absolute 当绝对定位时，元素不会参与正常的布局流程。相反，它的布局独立于其兄弟姐妹。该位置是根据 top、right、bottom 和 left 值确定的。具体实例如下：

cardOne: {
  backgroundColor: '#EF5354',
  position: 'absolute',
  top: 20,
  left: 20
},
cardTwo: {
  backgroundColor: '#50DBB4',
  position: 'absolute',
  top: 30,
  left: 40
},
cardThree: {
  backgroundColor: '#5DA3FA',
  position: 'absolute',
  top: 40,
  left: 60
},

具体效果如下：