mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-04-23 20:10:41 +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.
25 lines
890 B
JavaScript
25 lines
890 B
JavaScript
/**
|
|
* Reset unwanted styles beyond the control of React inline styles
|
|
*/
|
|
export const resetCSS =
|
|
`/* React Native for Web */
|
|
html {font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
|
|
body {margin:0}
|
|
button::-moz-focus-inner, input::-moz-focus-inner {border:0;padding:0}
|
|
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {display:none}`
|
|
|
|
/**
|
|
* Custom pointer event styles
|
|
*/
|
|
export const predefinedCSS =
|
|
`/* pointer-events */
|
|
.__style_pea, .__style_pebo, .__style_pebn * {pointer-events:auto}
|
|
.__style_pen, .__style_pebo *, .__style_pebn {pointer-events:none}`
|
|
|
|
export const predefinedClassNames = {
|
|
'pointerEvents:auto': '__style_pea',
|
|
'pointerEvents:box-none': '__style_pebn',
|
|
'pointerEvents:box-only': '__style_pebo',
|
|
'pointerEvents:none': '__style_pen'
|
|
}
|