跳到主要内容

StyleSheet

StyleSheet 是一个类似于 CSS StyleSheets 的抽象层。

代码质量建议：

  • 将样式从渲染函数中分离出来，可以使代码更容易理解。
  • 为样式命名是为渲染函数中的低级组件赋予语义的好方法，也有助于样式复用。
  • 在大多数 IDE 中，使用 StyleSheet.create() 可以提供静态类型检查和建议，帮助你编写合法的样式。

参考文档

方法​

compose()​

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

将两个样式组合在一起，使得 style2 会覆盖 style1 中的任何样式。如果其中任何一个样式为 falsy，则直接返回另一个，不会分配数组，从而节省内存分配并保持 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' 和零定位（position: 'absolute', left: 0, right: 0, top: 0, bottom: 0）来创建覆盖层，因此可以使用 absoluteFill 来简化代码并减少这些重复样式。如果需要，absoluteFill 可用于在 StyleSheet 中创建自定义条目，例如：

absoluteFillObject​

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

hairlineWidth​

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

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

如果模拟器被缩小显示，hairline width 的线条可能不可见。