使用 Flexbox 布局
我们在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox 可以在不同屏幕尺寸上提供一致的布局结构。
一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。
React Native 中的 Flexbox 的工作原理和 web 上的 CSS 基本一致，当然也存在少许差异。首先是默认值不同：
flexDirection的默认值为column（而不是row），alignContent默认值为flex-start（而不是stretch）,flexShrink默认值为0（而不是1）, 而flex只能指定一个数字值。
Flex
flex 属性决定元素在主轴上如何填满可用区域。整个区域会根据每个元素设置的 flex 属性值被分割成多个部分。
在下面的例子中，在设置了flex: 1的容器 view 中，有红色，黄色和绿色三个子 view。红色 view 设置了flex: 1，黄色 view 设置了flex: 2，绿色 view 设置了flex: 3。1+2+3 = 6，这意味着红色 view 占据整个区域的1/6，黄色 view 占据整个区域的2/6，绿色 view 占据整个区域的3/6。
Flex Direction
flexDirection 控制节点的子元素的布局方向。这也被称为主轴。交叉轴是垂直于主轴的轴，或者说是换行排列的轴。
-
column（默认值）：将子元素从上到下对齐。如果启用换行，则下一行将从容器顶部的第一个项目右侧开始。 -
row：将子元素从左到右对齐。如果启用换行，则下一行将在容器左侧的第一个项目下方开始。 -
column-reverse：将子元素从底部向上对齐。如果启用换行，则下一行将从容器底部的第一个项目右侧开始。 -
row-reverse：将子元素从右到左对齐。如果启用换行，则下一行将在容器右侧的第一个项目下方开始。
您可以在这里了解更多信息。
- TypeScript
- JavaScript
Layout Direction
布局 direction 指定了层次结构中的子元素和文本应该被排列的方向。布局方向还会影响到 start 和 end 所指代的边缘。默认情况下，React Native 采用从左到右（LTR）的布局方向进行排列。在这种模式下，start 表示左侧，而 end 表示右侧。
-
LTR（默认值）文本和子元素从左到右进行排列。对于一个元素来说，在其起始位置应用的外边距和内边距将被应用在左侧。 -
RTL文本和子元素从右到左进行排列。对于一个元素来说，在其起始位置应用的外边距和内边距将被应用在右侧。
- TypeScript
- JavaScript
Justify Content
在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？可用的选项有：
-
flex-start（默认值）将容器中的子元素沿主轴起始位置对齐。 -
flex-end将容器中的子元素沿主轴末尾位置对齐。 -
center将容器中的子元素在主轴上居中对齐。 -
space-between在容器的主轴上均匀分布子元素，将剩余空间平均分配给子元素之间。 -
space-around在容器的主轴上均匀分布子元素，将剩余空间围绕在每个子元素周围。与space-between相比，使用space-around会导致空间被分配到第一个子元素和最后一个子元素之前和之后。 -
space-evenly在对齐容器内沿着主轴均匀分布子项。每一对相邻项、主开始边缘和第一项以及主结束边缘和最后一项之间的间距都完全相同。
您可以在这里了解更多信息。
Align Items
alignItems 决定其子元素沿着交叉轴（与主轴垂直的轴，比如若主轴方向为 row，则交叉轴方向为 column）的排列方式。它与 justifyContent 非常相似，不同之处在于 alignItems 是应用于交叉轴而不是主轴。
-
stretch（默认值）将容器的子元素拉伸以匹配容器交叉轴的高度。 -
flex-start将容器的子元素对齐到容器交叉轴的起始位置。 -
flex-end将容器的子元素对齐到容器交叉轴的末尾位置。 -
center将容器的子元素居中对齐于容器交叉轴上。 -
baseline沿着公共基线对齐容器的子元素。可以为各个子元素设置参考基线，作为其父级基线。
要使 stretch 选项生效，子元素在交叉轴方向上不能有固定尺寸。在下面的例子中，只有当从子元素样式中移除了 width: 50 后，alignItems: 'stretch' 才会生效。
您可以在此处了解更多信息。
- TypeScript
- JavaScript
Align Self
alignSelf 与 alignItems 具有相同的选项和效果，但不是影响容器内的子元素，而是可以将此属性应用于单个子元素以更改其在父级中的对齐方式。alignSelf 会覆盖由父级使用 alignItems 设置的任何选项。
- TypeScript
- JavaScript
Align Content
alignContent 定义了沿次轴分布行的方式。只有在使用 flexWrap 将项目换行到多个行时才会生效。
-
flex-start（默认值）：将换行后的行与容器的次轴起始位置对齐。 -
flex-end：将换行后的行与容器的次轴末尾位置对齐。 -
stretch（在 Web 上使用 Yoga 时的默认值）：拉伸换行后的行以匹配容器的次轴高度。 -
center：将换行后的行居中对齐于容器的次轴。 -
space-between：均匀地在容器的次轴上间隔排列换行后的各个线，使剩余空间平均分布在这些线之间。 -
space-around：均匀地在容器的次轴上间隔排列换行后各个线，使剩余空间平均分布在这些线周围。相较于使用space-between，使用space-around会导致空白区域被分配到第一条线和最后一条线之前及之后两端。
您可以点击此处了解更多信息。
Flex Wrap
flexWrap 属性用于设置容器的换行方式，它控制了当子元素超出容器在主轴上的尺寸时要如何处理。默认情况下，子元素被强制放置在一行中（这可能会使元素被挤压）。如果允许换行，则项目将根据需要沿主轴分为多行。
在换行时，可以使用 alignContent 来设置这些行在容器中的排列方式。详细信息请参阅此处。
- TypeScript
- JavaScript
Flex Basis, Grow, and Shrink
-
flexBasis是一种独立于轴线的方式，用于提供项目沿主轴的默认大小。如果父容器具有flexDirection: row，则设置子项的flexBasis类似于设置该子项的width；如果父容器具有flexDirection: column，则设置子项的flexBasis类似于设置该子项的height。项目的flexBasis是在执行任何flexGrow和flexShrink计算之前该项目的默认大小。 -
flexGrow描述了在主轴上如何分配容器中剩余空间给其子项。布局完其子项后，容器将根据其子项指定的 flex grow 值来分配任何剩余空间。flexGrow接受大于等于 0 的任意浮点数值，默认值为 0。容器将按照各个子项的 flex grow 值加权分配剩余空间给它们。 -
flexShrink描述了当所有子项总尺寸超过主轴上容器尺寸时，在溢出情况下如何收缩各个子项。如果将溢出尺寸视为负剩余空间，则可以认为 flex shrink 和 flex grow 的工作方式非常相似。这两个属性也能很好地配合使用，允许子项根据需要进行伸缩。flexShrink接受大于等于 0 的任意浮点数值，默认值为 0（在 Web 上，默认值为 1）。容器将按照各个子项的 flex shrink 值加权收缩它们。
您可以在这里了解更多信息。
- TypeScript
- JavaScript
Row Gap, Column Gap 以及 Gap
-
rowGap设置元素行之间的间隙（gutter）大小。 -
columnGap设置元素列之间的间隙（gutter）大小。 -
gap设置行和列之间的间隙（gutter）大小。它是rowGap和columnGap的简写形式。
您可以使用 flexWrap 和 alignContent 以及 gap 来为项目添加一致的间距。
- TypeScript
- JavaScript
宽度与高度
width属性指定元素内容区域的宽度。同样，height属性指定元素内容区域的高度。
width和height都可以取以下值：
-
auto（默认值）React Native 根据元素的内容计算其宽度/高度，无论是其他子元素、文本还是图像。 -
pixels以绝对像素定义宽度/高度。根据组件上设置的其他样式，这可能是节点最终尺寸也可能不是。 -
percentage分别以父级宽度或高度的百分比定义宽度或高度。
绝对与相对定位
position 类型定义了元素在其父元素中的定位方式。
-
relative（默认值） 默认情况下，一个元素是相对定位的。这意味着一个元素根据布局的正常流程进行定位，然后根据top、right、bottom和left的值进行偏移。该偏移不会影响任何兄弟或父级元素的位置。 -
absolute绝对定位时，一个元素不参与正常布局流程。它独立于其兄弟元素进行布局。位置是基于top,right,bottom, 和 'left' 值来确定的。
包含块
元素的包含块是控制其位置和大小的祖先元素。
React Native 中包含块的工作方式与 Web 上的工作方式非常相似，但由于缺少一些 Web 功能而有所简化。
绝对定位元素的 top、right、bottom 和 left 值将相对于其包含块来计算。
应用于绝对定位元素的百分比长度（例如：width: '50%' 或 padding: '10%'）将相对于其包含块的大小来计算。例如，如果包含块宽度为 100 点，则绝对定位元素上的 width: 50% 将使其宽度为 50 点。
以下列表将帮助你确定任何给定元素的包含块：
- 如果该元素的
position类型为relative或static，则其包含块是其父元素。 - 如果该元素的
position类型为absolute，则其包含块是满足以下条件之一的最近祖先元素：- 它的
position类型不是static - 它具有
transform
- 它的
深入学习
Check out the interactive yoga playground that you can use to get a better understanding of flexbox.
以上我们已经介绍了一些基础知识，但要运用好布局，我们还需要很多其他的样式。对于布局有影响的完整样式列表记录在这篇文档中。
现在我们已经差不多可以开始真正的开发工作了。哦，忘了还有个常用的知识点：如何使用 TextInput 组件来处理用户输入。