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

React Native之触摸事件(Touchable系列和onLongPress)相关推荐

React Native 手势触摸事件机制详解（进阶篇）
源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. 在基础篇,对RN中的触摸事件做了详细的介绍.相信大家对于触摸事件流程机制有了更为清晰的认识.没 ...
React Native按钮详解|Touchable系列组件使用详解
转载自:http://www.devio.org/2017/01/10/React-Native按钮详解-Touchable系列组件使用详解/ 在做App开发过程中离不了的需要用户交互,说到交互,我们 ...
React Native 手势触摸事件机制详解（基础篇）
欢迎大家关注[跨平台开发那些事]公众号,定期推送跨平台开发技术实践. 源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. ...
react native手势触摸
简介在诸多移动应用中,需要有许多手势识别的使用场景.比如当涂抹.上滑.下滑.侧滑.拖动等,都涉及到方方面面的功能交互.而在react native中,就有提供处理这些手势的API,下面就来一一介绍相 ...
React Native - 3 View, Text简介以及onPress onLongPress事件
我们要生成如下的构图直接上图,不解释. 如下图所示,定义函数,函数之间不需要逗号,在元素上添加事件,使用关键字this.{function name} 转载于:https://www.cnblogs ...
【转】【React Native开发】
[React Native开发]React Native控件之ListView组件讲解以及最齐全实例(19) [React Native开发]React Native控件之Touchable*系列组 ...
React Native专题
未经授权不得转载: 出处地址:http://www.lcode.org 本文出自:[江清清的技术专栏] 本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入 ...
React Native专题-江清清
本React Native讲解专题:主要讲解了React Native开发,由基础环境搭建配置入门,基础,进阶相关讲解. 刚创建的React Native交流8群:533435865 欢迎各位大牛, ...
React Native专题-江
(一).基本介绍: 江博客http://blog.csdn.net/jiangqq781931404/article/category/6055594 React Native For Android ...

React Native之触摸事件(Touchable系列和onLongPress)

1 触摸事件

2 测试关键代码如下

3 手机效果如下

React Native之触摸事件(Touchable系列和onLongPress)相关推荐

最新文章

热门文章