81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
Alert,
|
|
Button,
|
|
Platform,
|
|
StyleSheet,
|
|
Text,
|
|
TouchableHighlight,
|
|
TouchableNativeFeedback,
|
|
TouchableOpacity,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
} from 'react-native';
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
alignItems: 'center',
|
|
paddingTop: 60,
|
|
},
|
|
button: {
|
|
alignItems: 'center',
|
|
backgroundColor: '#2196F3',
|
|
marginBottom: 30,
|
|
width: 260,
|
|
},
|
|
buttonText: {
|
|
color: 'white',
|
|
padding: 20,
|
|
},
|
|
});
|
|
|
|
class Touchables extends React.Component {
|
|
onPressButton() {
|
|
Alert.alert('You pressed THE button');
|
|
}
|
|
|
|
onLongPressButton() {
|
|
Alert.alert('You long-pressed the button');
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<View style={styles.container}>
|
|
<TouchableHighlight onPress={this.onPressButton} underlayColor="white">
|
|
<View style={styles.button}>
|
|
<Text style={styles.buttonText}>TouchableHighlight</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
|
|
<TouchableOpacity onPress={this.onPressButton}>
|
|
<View style={styles.button}>
|
|
<Text style={styles.buttonText}>TouchableOpacity</Text>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<TouchableNativeFeedback onPress={this.onPressButton}
|
|
background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
|
|
<View style={styles.button}>
|
|
<Text style={styles.buttonText}>TouchableNativeFeedback</Text>
|
|
</View>
|
|
</TouchableNativeFeedback>
|
|
|
|
<TouchableWithoutFeedback onPress={this.onPressButton}>
|
|
<View style={styles.button}>
|
|
<Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
|
|
<TouchableHighlight onPress={this.onPressButton} onLongPress={this.onLongPressButton}
|
|
underlayColor="white">
|
|
<View style={styles.button}>
|
|
<Text style={styles.buttonText}>Touchable with Long Press</Text>
|
|
</View>
|
|
</TouchableHighlight>
|
|
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Touchables;
|