mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
924dc36d4a
**Problem** StyleSheet's implementation was overly complex. It required `flattenStyle` to use `expandStyle`, and couldn't support mapping React Native style props to CSS properties without also exposing those CSS properties in the API. **Response** - `flattenStyle` is concerned only with flattening style objects. - `StyleSheetRegistry` is responsible for registering styles, mapping the React Native style prop to DOM props, and generating the CSS for the backing style element. - `StyleSheetRegistry` uses a simpler approach to caching styles and generating style sheet strings. It also drops the unobfuscated class names from development mode, as the React Dev Tools can provide a better debugging experience (pending a fix to allow props/styles to be changed from the dev tools). - `StyleSheet` will fall back to inline styles if it doesn't think a style sheet has been rendered into the document. The relationship is currently only implicit. This should be revisited. - `StyleSheet` exports `renderToString` as part of the documented API. - Fix processing of `transformMatrix` and add tests for `processTransform`. - Fix `input[type=search]` rendering in Safari by using `display:none` on its pseudo-elements. - Add support for `textDecorationLine` and `textAlignVertical`. - Note the `View` hack to conditionally apply the `flex-shrink:0` reset from css-layout. This is required because React Native's approach to resolving `style` is to give precendence to long-hand styles (e.g., `flexShrink`) over short-hand styles (e.g., `flex`). This means the `View` reset overrides any `flex:1` declaration. To get around this, `flexShrink` is only set in `View` if `flex` is not set.
1.2 KiB
1.2 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.
renderToString: function
Returns a string of CSS used to style the application.
Properties
hairlineWidth: number
Example
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
}
})
Use styles:
<View style={styles.container}>
<Text
style={[
styles.title,
this.props.isActive && styles.activeTitle
]}
/>
</View>
Or:
<View style={styles.container}>
<Text
style={{
...styles.title,
...(this.props.isActive && styles.activeTitle)
}}
/>
</View>