从组件的"样式"道具获取CSS属性值

我正在为库编写一个React Native组件,我希望用户能够使用该style属性设置样式,就像React.View和其他内置组件一样.

但是,由于我的组件实际上是由几个嵌套视图组成的,我需要做一些计算来弄清楚要在内部构造上使用什么样式.例如,我可能需要根据图像周围边框的厚度来调整图像的大小,或者根据给定的文本颜色调整高光颜色,或者以其他方式从另一个样式中推断出一些样式. .

为此,我需要能够从作为prop 传递的任何内容中提取实际的CSS属性(例如borderWidth: 2或backgroundColor: 'pink')style.只要它是一个普通的对象,这很好,但它也可能是调用的结果React.StyleSheet.create.这似乎是一个不透明的对象,所有选择器都只是映射到数字ID.

我如何解决这些并获得实际的CSS属性,以便做更复杂的事情,而不是简单地将它们直接传递给View？

内置StyleSheet.flatten函数(或相同的flattenStyle函数)可以将任何可以合法地传递给styleprop的对象转换为将CSS属性名称映射到值的对象.它适用于普通对象,返回的ID StyleSheet.create()和数组.

用于style在组件定义中检查prop中指定的宽度的示例用法:

import { StyleSheet } from 'react-native'

// ... then, later, e.g. in a component's .render() method:

let width = StyleSheet.flatten(this.props.style).width;