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
265 lines
9.9 KiB
JavaScript
265 lines
9.9 KiB
JavaScript
import GridView from './GridView'
|
||
import Heading from './Heading'
|
||
import MediaQueryWidget from './MediaQueryWidget'
|
||
import React, { Image, StyleSheet, ScrollView, Text, TextInput, Touchable, View } from '../../src'
|
||
|
||
export default class App extends React.Component {
|
||
static propTypes = {
|
||
mediaQuery: React.PropTypes.object,
|
||
style: View.propTypes.style
|
||
}
|
||
|
||
constructor(...args) {
|
||
super(...args)
|
||
this.state = {
|
||
scrollEnabled: true
|
||
}
|
||
}
|
||
|
||
render() {
|
||
const { mediaQuery } = this.props
|
||
const rootStyles = {
|
||
...(styles.root.common),
|
||
...(mediaQuery.small.matches && styles.root.mqSmall),
|
||
...(mediaQuery.large.matches && styles.root.mqLarge)
|
||
}
|
||
|
||
return (
|
||
<View accessibilityRole='main' style={rootStyles}>
|
||
<Heading size='xlarge'>React Native for Web</Heading>
|
||
<Text>React Native Web takes the core components from <Text
|
||
accessibilityRole='link' href='https://facebook.github.io/react-native/'>React
|
||
Native</Text> and brings them to the web. These components provide
|
||
simple building blocks – touch handling, flexbox layout,
|
||
scroll views – from which more complex components and apps can be
|
||
constructed.</Text>
|
||
|
||
<MediaQueryWidget mediaQuery={mediaQuery} />
|
||
|
||
<Heading size='large'>Image</Heading>
|
||
<Image
|
||
accessibilityLabel='accessible image'
|
||
children={<Text>Inner content</Text>}
|
||
defaultSource={{
|
||
uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAIAAAAP3aGbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wkGESkdPWMDggAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAD5UlEQVR42u3UMQ0AAAgEMcC/x7eCCgaSVsIN10kK4IORADAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAswLAkAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAADAvAsADDAjAsAMMCDAvAsAAMCzAsAMMCMCzAsAAMC8CwAMMCMCzAsAAMC8CwAMMCMCwAwwIMC8CwAAwLMCwAwwIwLMCwAAwLwLAAwwIwLADDAgwLwLAADAswLADDAjAswLAALi04UQW9HF910gAAAABJRU5ErkJggg=='
|
||
}}
|
||
onError={(e) => { console.log('Image.onError', e) }}
|
||
onLoad={(e) => { console.log('Image.onLoad', e) }}
|
||
onLoadEnd={() => { console.log('Image.onLoadEnd') }}
|
||
onLoadStart={() => { console.log('Image.onLoadStart') }}
|
||
resizeMode={'contain'}
|
||
source={{
|
||
height: 400,
|
||
uri: 'http://facebook.github.io/react/img/logo_og.png',
|
||
width: 400
|
||
}}
|
||
style={{
|
||
borderWidth: '5px'
|
||
}}
|
||
testID='Example.image'
|
||
/>
|
||
|
||
<Heading size='large'>Text</Heading>
|
||
<Text
|
||
onPress={(e) => { console.log('Text.onPress', e) }}
|
||
testID={'Example.text'}
|
||
>
|
||
PRESS ME.
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
|
||
lectus urna. Aliquam vitae justo porttitor, aliquam erat nec,
|
||
venenatis diam. Vivamus facilisis augue non urna mattis ultricies.
|
||
Suspendisse et vulputate enim, a maximus nulla. Vivamus imperdiet
|
||
hendrerit consequat. Aliquam lorem quam, elementum eget ex nec,
|
||
ultrices porttitor nibh. Nulla pellentesque urna leo, a aliquet elit
|
||
rhoncus a. Aenean ultricies, nunc a interdum dictum, dui odio
|
||
scelerisque mauris, a fringilla elit ligula vel sem. Sed vel aliquet
|
||
ipsum, sed rhoncus velit. Vivamus commodo pretium libero id placerat.
|
||
</Text>
|
||
<Text numberOfLines={1}>
|
||
TRUNCATED after 1 line.
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel
|
||
lectus urna. Aliquam vitae justo porttitor, aliquam erat nec,
|
||
venenatis diam. Vivamus facilisis augue non urna mattis ultricies.
|
||
Suspendisse et vulputate enim, a maximus nulla. Vivamus imperdiet
|
||
hendrerit consequat.
|
||
</Text>
|
||
|
||
<Heading size='large'>TextInput</Heading>
|
||
<TextInput
|
||
keyboardType='default'
|
||
onBlur={(e) => { console.log('TextInput.onBlur', e) }}
|
||
onChange={(e) => { console.log('TextInput.onChange', e) }}
|
||
onChangeText={(e) => { console.log('TextInput.onChangeText', e) }}
|
||
onFocus={(e) => { console.log('TextInput.onFocus', e) }}
|
||
onSelectionChange={(e) => { console.log('TextInput.onSelectionChange', e) }}
|
||
/>
|
||
<TextInput secureTextEntry />
|
||
<TextInput defaultValue='read only' editable={false} />
|
||
<TextInput keyboardType='email-address' />
|
||
<TextInput keyboardType='numeric' />
|
||
<TextInput keyboardType='phone-pad' />
|
||
<TextInput keyboardType='url' selectTextOnFocus />
|
||
<TextInput
|
||
defaultValue='default value'
|
||
maxNumberOfLines={10}
|
||
multiline
|
||
numberOfLines={5}
|
||
/>
|
||
|
||
<Heading size='large'>Touchable</Heading>
|
||
<Touchable
|
||
accessibilityLabel={'Touchable element'}
|
||
activeHighlight='lightblue'
|
||
activeOpacity={0.8}
|
||
onLongPress={(e) => { console.log('Touchable.onLongPress', e) }}
|
||
onPress={(e) => { console.log('Touchable.onPress', e) }}
|
||
onPressIn={(e) => { console.log('Touchable.onPressIn', e) }}
|
||
onPressOut={(e) => { console.log('Touchable.onPressOut', e) }}
|
||
>
|
||
<View style={styles.touchableArea}>
|
||
<Text>Touchable area (press, long press)</Text>
|
||
</View>
|
||
</Touchable>
|
||
|
||
<Heading size='large'>View</Heading>
|
||
<Heading>Default layout</Heading>
|
||
<View>
|
||
{[ 1, 2, 3, 4, 5, 6 ].map((item, i) => {
|
||
return (
|
||
<View key={i} style={styles.box}>
|
||
<Text>{item}</Text>
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
|
||
<Heading>Row layout</Heading>
|
||
<View style={styles.row}>
|
||
{[ 1, 2, 3, 4, 5, 6 ].map((item, i) => {
|
||
return (
|
||
<View key={i} style={styles.box}>
|
||
<Text>{item}</Text>
|
||
</View>
|
||
)
|
||
})}
|
||
</View>
|
||
|
||
<Heading>pointerEvents</Heading>
|
||
<GridView alley='10px'>
|
||
{['box-none', 'box-only', 'none'].map((value, i) => {
|
||
return (
|
||
<View
|
||
accessibilityRole='link'
|
||
children={value}
|
||
href='https://google.com'
|
||
key={i}
|
||
pointerEvents={value}
|
||
style={styles.pointerEventsBox}
|
||
/>
|
||
)
|
||
})}
|
||
</GridView>
|
||
|
||
<Heading size='large'>ScrollView</Heading>
|
||
<label>
|
||
<input
|
||
checked={this.state.scrollEnabled}
|
||
onChange={() => this.setState({
|
||
scrollEnabled: !this.state.scrollEnabled
|
||
})}
|
||
type='checkbox'
|
||
/> Enable scroll
|
||
</label>
|
||
|
||
<Heading>Default layout</Heading>
|
||
<View style={styles.scrollViewContainer}>
|
||
<ScrollView
|
||
contentContainerStyle={styles.scrollViewContentContainerStyle}
|
||
onScroll={e => console.log('ScrollView.onScroll', e)}
|
||
scrollEnabled={this.state.scrollEnabled}
|
||
scrollEventThrottle={1} // 1 event per second
|
||
style={styles.scrollViewStyle}
|
||
>
|
||
{Array.from({ length: 50 }).map((item, i) => (
|
||
<View key={i} style={styles.box}>
|
||
<Text>{i}</Text>
|
||
</View>
|
||
))}
|
||
</ScrollView>
|
||
</View>
|
||
|
||
<Heading>Horizontal layout</Heading>
|
||
<View style={styles.scrollViewContainer}>
|
||
<ScrollView
|
||
contentContainerStyle={styles.scrollViewContentContainerStyle}
|
||
horizontal
|
||
onScroll={e => console.log('ScrollView.onScroll', e)}
|
||
scrollEnabled={this.state.scrollEnabled}
|
||
scrollEventThrottle={1} // 1 event per second
|
||
style={styles.scrollViewStyle}
|
||
>
|
||
{Array.from({ length: 50 }).map((item, i) => (
|
||
<View key={i} style={{...styles.box, ...styles.horizontalBox}}>
|
||
<Text>{i}</Text>
|
||
</View>
|
||
))}
|
||
</ScrollView>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
root: {
|
||
common: {
|
||
marginVertical: 0,
|
||
marginHorizontal: 'auto'
|
||
},
|
||
mqSmall: {
|
||
maxWidth: '400px'
|
||
},
|
||
mqLarge: {
|
||
maxWidth: '600px'
|
||
}
|
||
},
|
||
row: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap'
|
||
},
|
||
box: {
|
||
alignItems: 'center',
|
||
flexGrow: 1,
|
||
justifyContent: 'center',
|
||
borderWidth: 1
|
||
},
|
||
horizontalBox: {
|
||
width: '50px'
|
||
},
|
||
boxFull: {
|
||
width: '100%'
|
||
},
|
||
pointerEventsBox: {
|
||
alignItems: 'center',
|
||
borderWidth: '1px',
|
||
flexGrow: 1,
|
||
height: '100px',
|
||
justifyContent: 'center'
|
||
},
|
||
touchableArea: {
|
||
alignItems: 'center',
|
||
borderWidth: 1,
|
||
height: '200px',
|
||
justifyContent: 'center'
|
||
},
|
||
scrollViewContainer: {
|
||
height: '200px'
|
||
},
|
||
scrollViewStyle: {
|
||
borderWidth: '1px'
|
||
},
|
||
scrollViewContentContainerStyle: {
|
||
padding: '10px'
|
||
}
|
||
})
|