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 手机效果如下
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。