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