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'}
});