StyleSheet
StyleSheet 是一种类似于 CSS StyleSheets 的抽象。
代码质量提示
- 通过将样式从渲染函数中移出,可以使代码更易于理解。
- 命名样式是为渲染函数中的低级组件添加含义并鼓励重用的好方法。
- 在大多数 IDE 中,使用
StyleSheet.create()
将提供静态类型检查和建议,帮助您编写有效的样式。
参考
方法
compose()
static compose(style1: Object, style2: Object): Object | Object[];
组合两个样式,使 style2
覆盖 style1
中的任何样式。如果其中一个样式为 falsy,则返回另一个样式,而不分配数组,从而节省分配并保持 PureComponent 检查的引用相等性。
create()
static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;
一个用于创建样式的身份函数。在 StyleSheet.create()
中创建样式的主要实际好处是对原生样式属性进行静态类型检查。
flatten()
static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;
将样式对象数组扁平化为一个聚合样式对象。
setStyleAttributePreprocessor()
警告:实验性功能。 可能会发生许多重大更改,并且不会可靠地公布。整个功能可能会被删除,谁知道呢?使用风险自负。
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
这被定义为平台上细线的宽度。它可以作为两个元素之间边框或分隔线的厚度。示例
此常量将始终是像素的整数倍(因此由它定义的线条可以看起来清晰),并将尝试匹配底层平台上细线的标准宽度。但是,您不应依赖它是一个恒定大小,因为在不同的平台和屏幕密度上,其值可能以不同方式计算。
如果您的模拟器缩小了,发丝宽度的线条可能不可见。