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