Question

我正在为库编写React Native组件，我希望用户能够使用<dependency> <groupId>org.mybatis.generator</groupId> <artifactId>mybatis-generator</artifactId> <version>1.3.2</version> </dependency>属性设置样式，就像style和其他内置组件一样。< / p>

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

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

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

Answer 1

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

从组件定义中检查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;

Answer 2

您需要导入StylesheetRegistry：

StyleSheetRegistry = require("../../node_modules/react-native/Libraries/StyleSheet/StyleSheetRegistry"),

然后传入样式ID：

var style = StyleSheetRegistry.getStyleByID(this.props.style)

Answer 3

请查看https://github.com/vitalets/react-native-extended-stylesheet#underscored-styles

通过扩展样式表创建的样式包含下划线prop中的原始值：

const styles = EStyleSheet.create({
  text: {
    fontSize: '1rem',
    color: 'gray'
  }
});

在运行时：

styles = {
  text: 0,
  _text: {
    fontSize: 16,
    color: 'gray'
  }
}

从组件＆＃34;样式＆＃34;中获取CSS属性值。支柱

3 个答案: