Browse Source

0.0.12 Touchables.

Frederic G. MARAND 6 years ago
parent
commit
b50fdfa6fc
2 changed files with 82 additions and 1 deletions
  1. 1 1
      App.js
  2. 81 0
      App11Touchables.js

+ 1 - 1
App.js

@@ -1,6 +1,6 @@
 // import { AppRegistry } from 'react-native';
 
-import App from './App10ButtonBasics';
+import App from './App11Touchables';
 
 export default App;
 

+ 81 - 0
App11Touchables.js

@@ -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;