var styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  activeTitle: {
    color: 'red',


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


  • 从render函数中移除具体的样式内容,可以使代码更清晰易懂。
  • 给样式命名也是对render函数中的原始组件的作用的一种标记。


  • 创建一个样式表,就可以使得我们后续更容易通过ID来引用样式,而不是每次都创建一个新的对象。
  • 它还使得样式只会在JavaScript和原生之间传递一次,随后的过程都可以只传递一个ID(这个优化还未实现)。


static create(obj: {[key: string]: any}) #


hairlineWidth: CallExpression #


{ borderBottomColor: '#bbb', borderBottomWidth: StyleSheet.hairlineWidth }


absoluteFill: CallExpression #

A very common pattern is to create overlays with position absolute and zero positioning, so absoluteFill can be used for convenience and to reduce duplication of these repeated styles.

absoluteFillObject: ObjectExpression #

Sometimes you may want absoluteFill but with a couple tweaks - absoluteFillObject can be used to create a customized entry in a StyleSheet, e.g.:

const styles = StyleSheet.create({ wrapper: { ...StyleSheet.absoluteFillObject, top: 10, backgroundColor: 'transparent', }, });

flatten: CallExpression #

Flattens an array of style objects, into one aggregated style object. Alternatively, this method can be used to lookup IDs, returned by StyleSheet.register.

NOTE: Exercise caution as abusing this can tax you in terms of optimizations.

IDs enable optimizations through the bridge and memory in general. Refering to style objects directly will deprive you of these optimizations.


var styles = StyleSheet.create({ listItem: { flex: 1, fontSize: 16, color: 'white' }, selectedListItem: { color: 'green' } }); StyleSheet.flatten([styles.listItem, styles.selectedListItem]) // returns { flex: 1, fontSize: 16, color: 'green' }

Alternative use:

StyleSheet.flatten(styles.listItem); // return { flex: 1, fontSize: 16, color: 'white' } // Simply styles.listItem would return its ID (number)

This method internally uses StyleSheetRegistry.getStyleByID(style) to resolve style objects represented by IDs. Thus, an array of style objects (instances of StyleSheet.create), are individually resolved to, their respective objects, merged as one and then returned. This also explains the alternative use.