d87f71ebc1
Improves StyleSheet benchmark performance by 13x. Removes undocumented `StyleSheet.resolve` API. Typical mean (and first) task duration. [benchmark] DeepTree: depth=3, breadth=10, wrap=4) -master 2809.76ms (3117.64ms) -patch 211.2ms (364.28ms) [benchmark] DeepTree: depth=5, breadth=3, wrap=1) -master 421.25ms (428.15ms) -patch 32.46ms (47.36ms) This patch adds memoization of DOM prop resolution (~3-4x faster), and re-introduces a `className`-based styling strategy (~3-4x faster). Styles map to "atomic css" rules. Fix #307
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
how to 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.
renderToString: function
Returns a string of the stylesheet 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',
}
})