Skip to main content

StyleSheet

样式表是类似于 CSS 样式表的抽象。

¥A StyleSheet is an abstraction similar to CSS StyleSheets.

代码质量提示：

¥Code quality tips:

  • 通过将样式从渲染函数中移开，可以使代码更易于理解。

    ¥By moving styles away from the render function, you're making the code easier to understand.

  • 命名样式是向渲染函数中的底层组件添加含义并鼓励重用的好方法。

    ¥Naming the styles is a good way to add meaning to the low level components in the render function, and encourage reuse.

  • 在大多数 IDE 中，使用 StyleSheet.create() 会提供静态类型检查和建议，以帮助你编写有效的样式。

    ¥In most IDEs, using StyleSheet.create() will offer static type checking and suggestions to help you write valid styles.

参考

¥Reference

方法​

¥Methods

compose()​

static compose(style1: Object, style2: Object): Object | Object[];

组合两种样式，以便 style2 将覆盖 style1 中的任何样式。如果其中一种样式为假，则返回另一种样式而不分配数组，从而节省分配并维护 PureComponent 检查的引用相等性。

¥Combines two styles such that style2 will override any styles in style1. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.

create()​

static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;

用于创建样式的身份函数。在 StyleSheet.create() 中创建样式的主要实际好处是针对原生样式属性进行静态类型检查。

¥An identity function for creating styles. The main practical benefit of creating styles inside StyleSheet.create() is static type checking against native style properties.

flatten()​

static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;

将一组样式对象展平为一个聚合样式对象。

¥Flattens an array of style objects, into one aggregated style object.

setStyleAttributePreprocessor()​

WARNING:EXPERIMENTAL.重大变化可能会发生很多，但不会可靠地宣布。整个事情可能会被删除，谁知道呢？使用风险自负。

¥WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk.

static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);

设置用于预处理样式属性值的函数。这在内部用于处理颜色和转换值。除非你确实知道自己在做什么并且已经用尽其他选择，否则不应使用此选项。

¥Sets a function to use to pre-process a style property value. This is used internally to process color and transform values. You should not use this unless you really know what you are doing and have exhausted other options.

属性​

¥Properties

absoluteFill​

一种非常常见的模式是使用绝对位置和零定位 (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0) 创建覆盖，因此可以使用 absoluteFill 以方便并减少这些重复样式的重复。如果需要，absoluteFill 可用于在样式表中创建自定义条目，例如：

¥A very common pattern is to create overlays with position absolute and zero positioning (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0), so absoluteFill can be used for convenience and to reduce duplication of these repeated styles. If you want, absoluteFill can be used to create a customized entry in a StyleSheet, e.g.:

absoluteFillObject​

有时你可能想要 absoluteFill，但需要进行一些调整 - absoluteFillObject 可用于在 StyleSheet 中创建自定义条目，例如：

¥Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be used to create a customized entry in a StyleSheet, e.g.:

hairlineWidth​

这被定义为平台上细线的宽度。它可以用作两个元素之间的边框或分隔线的厚度。示例：

¥This is defined as the width of a thin line on the platform. It can be used as the thickness of a border or division between two elements. Example:

该常量始终是像素的整数（因此由它定义的线可以看起来清晰），并且将尝试匹配底层平台上细线的标准宽度。但是，你不应该依赖它的恒定大小，因为在不同的平台和屏幕密度上，其值的计算方式可能不同。

¥This constant will always be a round number of pixels (so a line defined by it can look crisp) and will try to match the standard width of a thin line on the underlying platform. However, you should not rely on it being a constant size, because on different platforms and screen densities its value may be calculated differently.

如果你的模拟器缩小了比例，则可能看不到细线宽度的线。

¥A line with hairline width may not be visible if your simulator is downscaled.