react-native入门之使用 flex box 布局

文档：使用 Flexbox 布局 · React Native 中文网

1.简介

在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。

Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。

一般来说，flexDirection、alignItems和 justifyContent三个属性就已经能满足大多数需求。

React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。

首先是默认值不同：

• flexDirection的默认值为column（而不是row）
• alignContent默认值为 flex-start（而不是 stretch）
• flexShrink 默认值为0 （而不是1）
• flex只能指定一个数字值。

2.Flex

flex 属性决定元素在主轴上如何填满可用区域。

整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。

在下面的例子中，红色 view 设置了