|
@@ -0,0 +1,81 @@
|
|
|
+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;
|