跳至主内容
版本：0.81

样式表

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

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 可简化此过程并减少重复样式。也可用于在 StyleSheet 中创建自定义条目，例如：

absoluteFillObject​

若需要微调 absoluteFill 样式，可使用 absoluteFillObject 在 StyleSheet 中创建自定义条目，例如：

hairlineWidth​

此常量定义为平台上的细线宽度，可用作边框粗细或元素间的分隔线。例如：

该常量始终为整数像素值（确保线条显示清晰），并会适配底层平台的细线标准宽度。但请注意：不同平台和屏幕密度下其计算方式可能不同，不应依赖其恒定不变。

在缩放的模拟器上，hairline 宽度的线条可能无法显示。