77f72aa129
This fixes several issues with 'StyleSheet' and simplifies the implementation. 1. The generated style sheet could render after an apps existing style sheets, potentially overwriting certain 'html' and 'body' styles. To fix this, the style sheet is now rendered first in the document head. 2. 'StyleSheet' didn't make it easy to render app shells on the server. The prerendered style sheet would contain classnames that didn't apply to the client-generated style sheet (in part because the class names were not generated as a hash of the declaration). When the client initialized, server-rendered parts of the page could become unstyled. To fix this 'StyleSheet' uses inline styles by default and a few predefined CSS rules where inline styles are not possible. 3. Even with the strategy of mapping declarations to unique CSS rules, very large apps can produce very large style sheets. For example, twitter.com would produce a gzipped style sheet ~30 KB. Issues related to this are also alleviated by using inline styles. 4. 'StyleSheet' didn't really work unless you rendered an app using 'AppRegistry'. To fix this, 'StyleSheet' now handles injection of the DOM style sheet. Using inline styles doesn't appear to have any serious performance problems compared to using single classes (ref #110). Fix #90 Fix #106
1.6 KiB
StyleSheet
The StyleSheet abstraction converts predefined styles to (vendor-prefixed)
CSS without requiring a compile-time step. Some styles cannot be resolved
outside of the render loop and are applied as inline styles. Read more about to
how style your application.
Methods
create(obj: {[key: string]: any})
Each key of the object passed to create must define a style object.
flatten: function
Flattens an array of styles into a single style object.
render: function
Returns a React <style> element for use in server-side rendering.
Properties
absoluteFill: number
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.
<View style={StyleSheet.absoluteFill} />
absoluteFillObject: object
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,
backgroundColor: 'transparent',
top: 10
}
})
hairlineWidth: number
Example
<View style={styles.container}>
<Text
children={'Title text'}
style={[
styles.title,
this.props.isActive && styles.activeTitle
]}
/>
</View>
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
}
})