跳到主要内容
版本：0.80

StyleSheet

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 可用于在 StyleSheet 中创建自定义条目，例如：

absoluteFillObject​

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

hairlineWidth​

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

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

如果你的模拟器被缩小，具有细线宽度的线条可能不可见。