跳到主要内容

StyleSheet

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

代码质量提示

  • 通过将样式从渲染函数中移出,可以使代码更易于理解。
  • 命名样式是为渲染函数中的低级组件添加意义并鼓励重用的好方法。
  • 在大多数 IDE 中,使用 StyleSheet.create() 将提供静态类型检查和建议,以帮助您编写有效的样式。

参考

方法

compose()

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

组合两个样式,使 style2 覆盖 style1 中的任何样式。如果任一样式为假值,则返回另一个样式,而不会分配数组,从而节省分配并为 PureComponent 检查保持引用相等。


create()

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

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


flatten()

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

将样式对象数组扁平化为一个聚合样式对象。


setStyleAttributePreprocessor()

实验性

可能会经常发生重大更改,并且不会可靠地宣布。整个东西可能会被删除,谁知道呢?请自行承担使用风险。

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

设置一个函数来预处理样式属性值。这在内部用于处理颜色和转换值。除非您真正了解自己在做什么并且已经用尽了其他选项,否则不应使用它。

属性


absoluteFill

一个非常常见的模式是使用绝对定位和零定位(position: 'absolute', left: 0, right: 0, top: 0, bottom: 0)创建叠加层,因此 absoluteFill 可以方便地使用并减少这些重复样式的重复。如果您愿意,absoluteFill 可以用于在样式表中创建自定义条目,例如


absoluteFillObject

有时您可能需要 absoluteFill,但需要进行一些调整——absoluteFillObject 可用于在 StyleSheet 中创建自定义条目,例如


hairlineWidth

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

这个常量将始终是像素的整数倍(因此由它定义的线条可以看起来清晰),并将尝试匹配底层平台上的标准细线宽度。但是,您不应依赖它是一个恒定大小,因为在不同的平台和屏幕密度上,它的值可能会有不同的计算。

如果您的模拟器缩放了,则发丝宽度的线条可能不可见。