mirror of
https://github.com/zhigang1992/react-native-web.git
synced 2026-01-12 22:51:09 +08:00
53 lines
1.2 KiB
JavaScript
53 lines
1.2 KiB
JavaScript
import React, { Image, Text, TextInput, View } from '../dist/react-native-web';
|
|
|
|
class Example extends React.Component {
|
|
render() {
|
|
return (
|
|
<View>
|
|
<View style={styles.grid}>
|
|
{[1,2,3,4,5,6].map((item, i) => {
|
|
return (
|
|
<View key={i} style={{ ...styles.box, ...(item === 6 && styles.boxFull) }}>
|
|
<Text style={{ fontSize: '2rem' }}>{item}</Text>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
<View style={{
|
|
alignItems: 'center',
|
|
borderWidth: '1px',
|
|
justifyContent: 'center',
|
|
marginTop: '10px',
|
|
height: '200px'
|
|
}}>
|
|
<Text>This should be centered</Text>
|
|
</View>
|
|
|
|
<TextInput type="text" autoFocus />
|
|
<TextInput multiline defaultValue="default value" />
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = {
|
|
grid: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap'
|
|
},
|
|
box: {
|
|
alignItems: 'center',
|
|
backgroundColor: 'lightblue',
|
|
flexGrow: 1,
|
|
justifyContent: 'center',
|
|
borderColor: 'blue',
|
|
borderWidth: '5px'
|
|
},
|
|
boxFull: {
|
|
width: '100%'
|
|
}
|
|
}
|
|
|
|
React.render(<Example />, document.getElementById('react-root'));
|