React Native 使用入门笔记(二）Flexbox布局

React Native 使用入门笔记(二）Flexbox布局

Flexbox布局介绍

Flexbox布局中文为伸缩布局，用来指定某个组件的子元素的布局。React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一样，如果有相关经验可以忽略本章节。

Flexbox常用属性

• flexDirection
• justifyContent
• alignItems
• flex

flexDirection

flexDirection 可以控制它的子组件的排序方式。也就是从上到下或者是从左到右。
可设置的值如下：

• row（横向排列）
• row-reverse（反向横向排列）
• column（竖向排列）
• column-reverse（反向横向排列）

web中的Flexbox布局默认是row，也就是横向排列。

flexDirection: 'row',

而React Native中的默认排序方式为column，也就是竖向排列。

flexDirection: 'column',

反向横向排列效果如下：

flexDirection:'row-reverse'

justifyContent

justifyContent可以决定其子元素沿着主轴的排列方式。主轴的排列方式默认为靠近主轴的起始位置依次排列。主轴是什么意思呢？如果flexDirection 的值为row的时候，主轴就是X轴（辅轴为Y轴），也就是从左到右依次排列，如果flexDirection 的值为column的时候，主轴就为Y轴（辅轴为X轴）。可设置值如下：

• List item

• flex-start

• center

• flex-end

• space-around

• space-between

• space-evenly

alignItems

flex