mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
501c19fe9b
Expand shorthand properties to preserve the one-rule-to-one-style isolation. Resolve styles like React Native - most specific comes last. Add support for the hz and vt properties for margin and padding. Fix #40
37 lines
757 B
JavaScript
37 lines
757 B
JavaScript
import React, { StyleSheet, Text, View } from '../../src'
|
|
|
|
const styles = StyleSheet.create({
|
|
root: {
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
marginVertical: 10,
|
|
padding: 10,
|
|
textAlign: 'center'
|
|
},
|
|
heading: {
|
|
fontWeight: 'bold',
|
|
padding: 5
|
|
}
|
|
})
|
|
|
|
const MediaQueryWidget = ({ mediaQuery = {} }) => {
|
|
const active = Object.keys(mediaQuery).reduce((active, alias) => {
|
|
if (mediaQuery[alias].matches) {
|
|
active = {
|
|
alias,
|
|
mql: mediaQuery[alias]
|
|
}
|
|
}
|
|
return active
|
|
}, {})
|
|
|
|
return (
|
|
<View style={styles.root}>
|
|
<Text style={styles.heading}>Active Media Query</Text>
|
|
<Text>{`"${active.alias}"`} {active.mql.media}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default MediaQueryWidget
|