跳到主要内容
新架构实战课 实操 + 基建 + 原理全维度包揽，抢先掌握 React Native 新架构精髓 立即查看 >Version: 0.69

使用 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​

在组件的style中指定flexDirection可以决定布局的主轴。子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向。

You can learn more here.

Layout Direction​

Layout direction specifies the direction in which children and text in a hierarchy should be laid out. Layout direction also affects what edge start and end refer to. By default React Native lays out with LTR layout direction. In this mode start refers to left and end refers to right.

  • LTR (default value) Text and children and laid out from left to right. Margin and padding applied the start of an element are applied on the left side.

  • RTL Text and children and laid out from right to left. Margin and padding applied the start of an element are applied on the right side.

Justify Content​

在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？可用的选项有：

  • flex-start(默认值) Align children of a container to the start of the container's main axis.

  • flex-end Align children of a container to the end of the container's main axis.

  • center Align children of a container in the center of the container's main axis.

  • space-between Evenly space off children across the container's main axis, distributing the remaining space between the children.

  • space-around Evenly space off children across the container's main axis, distributing the remaining space around the children. Compared to space-between, using space-around will result in space being distributed to the beginning of the first child and end of the last child.

  • space-evenly Evenly distribute children within the alignment container along the main axis. The spacing between each pair of adjacent items, the main-start edge and the first item, and the main-end edge and the last item, are all exactly the same.

You can learn more here.

Align Items​

在组件的 style 中指定alignItems可以决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。子元素是应该靠近次轴的起始端还是末尾段分布呢？亦或应该均匀分布？可用的选项有：

  • stretch (默认值) Stretch children of a container to match the height of the container's cross axis.

  • flex-start Align children of a container to the start of the container's cross axis.

  • flex-end Align children of a container to the end of the container's cross axis.

  • center Align children of a container in the center of the container's cross axis.

  • baseline Align children of a container along a common baseline. Individual children can be set to be the reference baseline for their parents.

注意：要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸。以下面的代码为例：只有将子元素样式中的width: 50去掉之后，alignItems: 'stretch'才能生效。

You can learn more here.

Align Self​

alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.

Align Content​

alignContent defines the distribution of lines along the cross-axis. This only has effect when items are wrapped to multiple lines using flexWrap.

  • flex-start (default value) Align wrapped lines to the start of the container's cross axis.

  • flex-end Align wrapped lines to the end of the container's cross axis.

  • stretch Stretch wrapped lines to match the height of the container's cross axis.

  • center Align wrapped lines in the center of the container's cross axis.

  • space-between Evenly space wrapped lines across the container's main axis, distributing the remaining space between the lines.

  • space-around Evenly space wrapped lines across the container's main axis, distributing the remaining space around the lines. Compared to space-between, using space-around will result in space being distributed to the beginning of the first line and the end of the last line.

You can learn more here.

Flex Wrap​

The flexWrap property is set on containers and it controls what happens when children overflow the size of the container along the main axis. By default, children are forced into a single line (which can shrink elements). If wrapping is allowed, items are wrapped into multiple lines along the main axis if needed.

When wrapping lines, alignContent can be used to specify how the lines are placed in the container. Learn more here.

Flex Basis, Grow, and Shrink​

  • flexGrow describes how any space within a container should be distributed among its children along the main axis. After laying out its children, a container will distribute any remaining space according to the flex grow values specified by its children.

    flexGrow accepts any floating point value >= 0, with 0 being the default value. A container will distribute any remaining space among its children weighted by the children’s flexGrow values.

  • flexShrink describes how to shrink children along the main axis in the case in which the total size of the children overflows the size of the container on the main axis. flexShrink is very similar to flexGrow and can be thought of in the same way if any overflowing size is considered to be negative remaining space. These two properties also work well together by allowing children to grow and shrink as needed.

    flexShrink accepts any floating point value >= 0, with 0 being the default value (on the web, the default is 1). A container will shrink its children weighted by the children’s flexShrink values.

  • flexBasis is an axis-independent way of providing the default size of an item along the main axis. Setting the flexBasis of a child is similar to setting the width of that child if its parent is a container with flexDirection: row or setting the height of a child if its parent is a container with flexDirection: column. The flexBasis of an item is the default size of that item, the size of the item before any flexGrow and flexShrink calculations are performed.

You can learn more here.

宽度与高度​

The width property specifies the width of an element's content area. Similarly, the height property specifies the height of an element's content area.

Both width and height can take the following values:

  • auto (default value) React Native calculates the width/height for the element based on its content, whether that is other children, text, or an image.

  • pixels Defines the width/height in absolute pixels. Depending on other styles set on the component, this may or may not be the final dimension of the node.

  • percentage Defines the width or height in percentage of its parent's width or height, respectively.

绝对与相对定位​

The position type of an element defines how it is positioned within its parent.

  • relative (default value) By default, an element is positioned relatively. This means an element is positioned according to the normal flow of the layout, and then offset relative to that position based on the values of top, right, bottom, and left. The offset does not affect the position of any sibling or parent elements.

  • absolute When positioned absolutely, an element doesn't take part in the normal layout flow. It is instead laid out independent of its siblings. The position is determined based on the top, right, bottom, and left values.

深入学习​

Check out the interactive yoga playground that you can use to get a better understanding of flexbox.

以上我们已经介绍了一些基础知识，但要运用好布局，我们还需要很多其他的样式。对于布局有影响的完整样式列表记录在这篇文档中。

现在我们已经差不多可以开始真正的开发工作了。哦，忘了还有个常用的知识点：如何使用 TextInput 组件来处理用户输入。