与狗狗做网站,wordpress 手机app,郑州居家办公全员核酸,网推1 触摸事件
普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮
TouchableHighlight 背景会在用户手指按下时变暗
TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果
TouchableOpacity指按下时降低按钮的透明度#xff0c;而…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 ComponentProps {render() {return (View style{styles.container}View style{styles.buttonContainer}Button onPress{this.showMsg} titlepress me//View View style{styles.buttonContainer}Button onPress{this.showMsg} titlepress me color#841584//View View style{styles.buttonContainer}TouchableHighlight onPress{this.showMsg} underlayColorwhiteView 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} titleonLongPress me/Button onPress{this.showMsg} titleonLongPress 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 手机效果如下
