mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-23 20:10:41 +08:00
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
79 lines
1.6 KiB
Markdown
79 lines
1.6 KiB
Markdown
# 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](../guides/style.md).
|
|
|
|
## 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.
|
|
|
|
```js
|
|
<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.:
|
|
|
|
```js
|
|
const styles = StyleSheet.create({
|
|
wrapper: {
|
|
...StyleSheet.absoluteFillObject,
|
|
backgroundColor: 'transparent',
|
|
top: 10
|
|
}
|
|
})
|
|
```
|
|
|
|
**hairlineWidth**: number
|
|
|
|
## Example
|
|
|
|
```js
|
|
<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',
|
|
}
|
|
})
|
|
```
|