react-native(리액트 네이티브) component - Touchable

react-native(리액트 네이티브) component - Touchable

import React, { Component } from 'react'

import {

AppRegistry,

StyleSheet,

TouchableHighlight,

TouchableNativeFeedback,

TouchableOpacity,

Image,

Text,

View,

} from 'react-native'

export default class App extends Component {

constructor(props) {

super(props)

this.state = { count: 0 }

}

onPress = () => {

this.setState({

count: this.state.count+1

})

}

render() {

return (

<View style={styles.container}>

<Text>TouchableHighlight</Text>

<TouchableHighlight

style={styles.button}

onPress={this.onPress}

>

<Text> Touch Here </Text>

</TouchableHighlight>

<View style={[styles.countContainer]}>

<Text style={[styles.countText]}>

{ this.state.count !== 0 ? this.state.count: null}

</Text>

</View>

<Text>{'\n'}TouchableNativeFeedback</Text>

<TouchableNativeFeedback

onPress={this._onPressButton}

background={TouchableNativeFeedback.SelectableBackground()}>

<View style={{width: 150, height: 100, backgroundColor: 'red'}}>

<Text style={{margin: 30}}>Button</Text>

</View>

</TouchableNativeFeedback>

<Text>{'\n'}{'\n'}TouchableOpacity</Text>

<TouchableOpacity onPress={this._onPressButton}>

<Image

style={styles.button}

source={require('./icon_settings.png')}

/>

</TouchableOpacity>

</View>

)

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

paddingHorizontal: 10

},

button: {

alignItems: 'center',

backgroundColor: '#DDDDDD',

padding: 10

},

countContainer: {

alignItems: 'center',

padding: 10

},

countText: {

color: '#FF00FF'

}

})

AppRegistry.registerComponent('App', () => App)