1 触摸事件

普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮

TouchableHighlight 背景会在用户手指按下时变暗

TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果

TouchableOpacity指按下时降低按钮的透明度，而不会改变背景的颜色

TouchableWithoutFeedback 不显示任何视觉反馈

检测用户是否进行了长按操作,可以在上面列出的任意组件中使用onLongPress属性来实现

2 测试关键代码如下

要记得导入相应的组件

    import React, {Component} from 'react';
    import {Platform, ScrollView, StyleSheet, Text, View, TextInput, NativeModules, DeviceEventEmitter, Image, Button, AppRegistry, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback} from 'react-native';

    export default class App extends Component<Props> {
      
      render() {
        return (
          <View style={styles.container}>
            <View style={styles.buttonContainer}>
              <Button onPress={this.showMsg} title="press me"/>
            </View>  
            <View style={styles.buttonContainer}>
              <Button onPress={this.showMsg} title="press me" color="#841584"/>
            </View>
     
           <View style={styles.buttonContainer}>
              <TouchableHighlight onPress={this.showMsg} underlayColor="white">
                  <View style={styles.button}>
                      <Text style={styles.text}>TouchableHighlight</Text>
                  </View>
              </TouchableHighlight>
            </View>
     
            <View style={styles.buttonContainer}>
              <TouchableOpacity onPress={this.showMsg}>
                  <View style={styles.button}>
                      <Text style={styles.text}>TouchableOpacity</Text>
                  </View>
              </TouchableOpacity>
            </View>
     
            <View style={styles.buttonContainer}>
              <TouchableNativeFeedback onPress={this.showMsg}>
                  <View style={styles.button}>
                      <Text style={styles.text}>TouchableNativeFeedback</Text>
                  </View>
              </TouchableNativeFeedback>
            </View>
     
            <View style={styles.buttonContainer}>
              <TouchableWithoutFeedback onPress={this.showMsg}>
                  <View style={styles.button}>
                      <Text style={styles.text}>TouchableWithoutFeedback</Text>
                  </View>
              </TouchableWithoutFeedback>
            </View>
     
           <View style={styles.buttonContainer}>
              <TouchableWithoutFeedback onLongPress={this.showMsg}>
                  <View style={styles.button}>
                      <Text style={styles.text}>onLongPress me</Text>
                  </View>
              </TouchableWithoutFeedback>
            </View>
     
           <View style={styles.layoutButtonContainer}>
              <Button onPress={this.showMsg} title="onLongPress me"/>
          <Button onPress={this.showMsg} title="onLongPress me" color="#841584"/>
            </View>
          
     
          </View>
        );
      }
        //记得这里调用的时候不需要加上()
        showMsg(){
        alert("showMsg(){}");  
        }
        
        //记得末尾加上分号,调用的时候也要加上()
        showMessage = () => {
            alert("showMessage = () => {}");
        };
    }
     
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center'
      },
      buttonContainer: {
        margin:10
      },
      layoutButtonContainer: {
        margin:10,
        flexDirection: 'row',
        justifyContent: 'space-between'
      },
      button: {
        alignItems: 'center',
        backgroundColor: '#842534'
      },
      text: {
        padding: 10,
        color: 'white'
      }
    });

 
3 手机效果如下