mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-03-30 17:34:05 +08:00
0ab984f507
Without access to the Shadow DOM pseudo-elements, the placeholder behaviour needs to be reimplemented. Update to match React Native's modification to `TextInput` to include all `View` props and use the `Text` style props. Fix #12 Fix #48
37 lines
771 B
JavaScript
37 lines
771 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 && active.mql.media}</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default MediaQueryWidget
|