StyleSheet(样式)

类似CSS样式表的样式表是一个抽象.

创建一个新的样式表:

var url styles = StyleSheet.create({

  container: {

    borderRadius: 4,

    borderWidth: 0.5,

    borderColor: '#d6d7da',

  },

  title: {

    fontSize: 19,

    fontWeight: 'bold',

  },

  activeTitle: {

    color: 'red',

  },

}),

使用stylesheet:

<View style={styles.container}>

  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />

</View>

代码质量:

性能:

方法

 static setStyleAttributePreprocessor(property, process)

注意:EXPERIMENTAL。突破性变化可能会经常发生并且这些变化将不会准确的显示出来。整个文件可能会被删除,请在可控范围内使用。

设置一个用于预处理样式属性值的函数。用来处理颜色和变换值。你不应该使用这个,除非其它选择已经用完并且你知道自己在做什么。

 static create(obj)

从给定的对象创建样式引用。

属性

 hairlineWidth:CallExpression

这里的常量定义平台上的细线的宽度. 它可以作为两个组建之间的边界或划分的厚度. 示例:

  {

    borderBottomColor:'#bbb'

    borderBottomWidth: StyleSheet.hairlineWidth

  }

这一常量始终是一个整数的像素值(线看起来会很细), 并会尽量符合当前平台最细的线的标准. 但是, 我们不能把它"视为一个常量", 因为不同的平台和不同的屏幕像素密度会导致不同的结果.

hairlineWidth(发线宽度)的线在模拟器缩小的情况下可能会不可见。

 absoluteFill:CallExpression

常见的类型是创建绝对定位和0定位的覆盖,所以'absoluteFill'可以用于方便和减少重复的样式。

 absoluteFillObject:ObjectExpression

有时我们可能使用absoluteFill,但是absoluteFillObject可以在StyleSheet中用来创建一个定制的入口,如:

  const styles = StyleSheet.create({

    wrapper: {

      ...StyleSheet.absoluteFillObject,

      top: 10,

      backgroundColor: 'transparent',

    },

   });

 flatten:CallExpression

将样式对象数组合并成一个聚合样式对象。另外, 该方法可用于查找的ID, 由 StyleSheet.register 返回.

注意: 不要过多使用此方法用于优化方面.允许使用 IDs 来优化和记忆. 参照样式对象将直接删除这些优化.

示例:

var styles = StyleSheet.create({

  listItem: {

    flex: 1,

    fontSize: 16,

    color: 'white'

   },

  selectedListItem: {

    color: 'green'

   },

}),


StyleSheet.flatten([styles.listItem, styles.selectedListItem])

// 返回 { flex: 1, fontSize: 16, color: 'green' }

选择使用:

StyleSheet.flatten(styles.listItem)

// 返回 { flex: 1, fontSize: 16, color: 'white' }

// 返回 ID (number)在 styles.listItem 里的内容

通过IDs和 StyleSheetRegistry.getStyleByID(style) 可以获得样式. 因此, 样式对象数组 (StyleSheet.create的实例), 逐个解析成各自的对象并合并成一个返回.