React native FlexBox布局的基本用法

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。

在组件中的style中指定flexDirection可以决定布局的主轴，子元素是按着水平轴（row）排列，还是数值轴（colum，默认值）排列。flex：定义了元素的可伸缩能力。默认值是0

在组件中的style中指定justifyContent可以决定子元素沿着主轴的排列方式。靠近起始端：flex-start（默认）。 靠近末端：flex-end。 中心：center。space-around和 space-between。

flex-start：

flex-end：

space-around

space-between：

在组件的style中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。

对应的这些可选项有：flex-start（靠近次轴起始端）、center（次轴中心）、flex-end(次轴末尾段)以及stretch（元素被拉伸以适应容器）。

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。