样式表
样式表是类似于 CSS 样式表的一种抽象。
代码质量提示:
- 通过将样式移出渲染函数,可以使代码更易理解。
- 给样式命名是向渲染函数中的底层组件添加含义并鼓励重用的好方法。
- 在大多数 IDE 中,使用
StyleSheet.create()会提供静态类型检查和建议,以帮助你编写有效的样式。
参考
方法
compose()
tsx
static compose(style1: Object, style2: Object): Object | Object[];
合并两个样式,使得 style2 会覆盖 style1 中的任何样式。如果任一样式为假值,则返回另一个样式,而不分配数组,从而节省分配且保持纯组件检查的引用相等性。
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()
实验性
可能会经常发生破坏性变更,且不会可靠公告。整个 API 也可能被删除,谁知道呢?请自行承担风险使用。
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 可用于创建样式表中的自定义条目,例如:
hairlineWidth
这是平台上细线的宽度。它可以用作边框或两个元素之间分隔线的厚度。示例:
该常量始终为像素的整数(因此由其定义的线条可显示清晰),并会尽量匹配底层平台上的细线标准宽度。但是,你不应该依赖它是一个常量尺寸,因为在不同平台和屏幕密度上其值可能有所不同。
如果你的模拟器被缩小,细线宽度定义的线条可能不可见。