react-native - 从组件的 "style"属性获取 CSS 属性值

Question

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

但是，由于我的组件实际上是由几个嵌套 View 组成的，因此我需要进行一些计算来确定要在内部 View 上放置什么样式。例如，我可能需要根据图像周围边框的粗细调整图像的大小，或者根据给定的文本颜色调整突出显示颜色，或者以其他方式从另一段样式中推断出某些样式.

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

我如何解决这些问题并获得实际的 CSS 属性，以便对它们做任何比简单地将它们直接传递给 View 更复杂的事情?

Answer 1

内置 StyleSheet.flatten 函数(或相同的 flattenStyle 函数)可以转换任何可以合法传递给 style 的东西。 prop 到一个对象，将 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;