Skip to main content

StyleSheet

StyleSheet 是类似于 CSS StyleSheets 的抽象

¥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.

参考

¥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): Object;

从给定对象创建 StyleSheet 样式引用。

¥Creates a StyleSheet style reference from the given object.

flatten()​

static flatten(style: Object[]): Object;

将一组样式对象展平为一个聚合样式对象。或者，此方法可用于查找由 StyleSheet.register 返回的 ID。

¥Flattens an array of style objects, into one aggregated style object. Alternatively, this method can be used to lookup IDs, returned by StyleSheet.register.

注意：请务必小心，因为滥用此功能可能会给你带来优化负担。ID 通常可以通过桥接器和内存进行优化。直接引用样式对象将使你无法进行这些优化。

¥NOTE: Exercise caution as abusing this can tax you in terms of optimizations. IDs enable optimizations through the bridge and memory in general. Referring to style objects directly will deprive you of these optimizations.

该方法内部使用 StyleSheetRegistry.getStyleByID(style) 来解析 ID 表示的样式对象。因此，一组样式对象（StyleSheet.create() 的实例）被单独解析为它们各自的对象，合并为一个，然后返回。这也解释了替代用途。

¥This method internally uses StyleSheetRegistry.getStyleByID(style) to resolve style objects represented by IDs. Thus, an array of style objects (instances of StyleSheet.create()), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use.

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.