高度和宽度

组件的高度和宽度决定其在屏幕上的大小。

¥A component's height and width determine its size on the screen.

固定尺寸

¥Fixed Dimensions

设置组件尺寸的一般方法是在样式中添加固定的 width 和 height。React Native 中的所有维度都是无单位的，并且表示与密度无关的像素。

¥The general way to set the dimensions of a component is by adding a fixed width and height to style. All dimensions in React Native are unitless, and represent density-independent pixels.

对于尺寸应始终固定为多个点而不是根据屏幕尺寸计算的组件，以这种方式设置尺寸很常见。

¥Setting dimensions this way is common for components whose size should always be fixed to a number of points and not calculated based on screen size.

提醒

不存在从点到物理测量单位的通用映射。这意味着具有固定尺寸的组件在不同的设备和屏幕尺寸上可能不具有相同的物理尺寸。但是，对于大多数用例来说，这种差异并不明显。

¥There is no universal mapping from points to physical units of measurement. This means that a component with fixed dimensions might not have the same physical size, across different devices and screen sizes. However, this difference is unnoticeable for most use cases.

弹性尺寸

¥Flex Dimensions

在组件样式中使用 flex 可以使组件根据可用空间动态扩展和收缩。通常，你将使用 flex: 1，它告诉组件填充所有可用空间，并在具有相同父级的其他组件之间均匀共享。给定的 flex 越大，组件与其兄弟组件相比占用的空间比率就越高。

¥Use flex in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use flex: 1, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

信息

仅当其父组件的尺寸大于 0 时，组件才能扩展以填充可用空间。如果父级没有固定的 width 和 height 或 flex，则父级将具有 0 的尺寸，并且 flex 子级将不可见。

¥A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed width and height or flex, the parent will have dimensions of 0 and the flex children will not be visible.

在你可以控制组件的大小之后，下一步是 了解如何将其布局在屏幕上。

¥After you can control a component's size, the next step is to learn how to lay it out on the screen.

百分比维度

¥Percentage Dimensions

如果你想填充屏幕的某个部分，但又不想使用 flex 布局，则可以在组件的样式中使用百分比值。与弹性尺寸类似，百分比尺寸需要父级具有定义的尺寸。

¥If you want to fill a certain portion of the screen, but you don't want to use the flex layout, you can use percentage values in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.