React Native之触摸事件(Touchable系列和onLongPress)

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 手机效果如下