ReactNative-触摸事件

链接：http://blog.csdn.net/u014360817/article/details/52410563

在ReactNative好像只有在Text组件中支持触摸事件其默认是不支持触摸事件的ReactNative给我们提供几个API以供组件支持触摸：TouchableOpacity，TouchableHighlight，TouchableNativeFeedback，TouchableWithoutFeedback，
这里使用方法一样只是反馈效果有点差别，这里只演示TouchableOpacity.

经常用到的触摸回调函数：
–onPressIn：点击开始；
–onPressOut：点击结束或者离开；
–onPress：单击事件回调；
–onLongPress：长按事件回调。

使用方法只需将需要使用触摸功能的组件包裹即可

/*** Created by gaocai on 16/9/2.*/
import React, {Component} from 'react';
import {AppRegistry,StyleSheet,Text,View,TouchableOpacity,TouchableHighlight,TouchableNativeFeedback,TouchableWithoutFeedback,
} from 'react-native'class TouchG extends Component {render() {return (<View><TouchableOpacity//当开始按下时调用onPressIn={() => console.log('onPressIn')}//当松开时调用onPressOut={() => console.log('onPressOut')}//当按下时调用onPress={() => console.log('onPress')}//当长按时调用onLongPress={() => console.log('onLogPress')}><View style={{width: 100, height: 100, backgroundColor: 'red'}}/></TouchableOpacity><Text//当开始按下时调用onPressIn={() => console.log('onPressIn')}//当松开时调用onPressOut={() => console.log('onPressOut')}//当按下时调用onPress={() => console.log('onPress')}//当长按时调用onLongPress={() => console.log('onLogPress')}>Text支持点击</Text></View>)}
}module.exports = TouchG;

这里只是简单介绍下触摸事件的使用，详细可看以下博客：

http://www.race604.com/react-native-touch-event/

http://www.reactnative.pw/reactnative%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A30-21/panresponder.html

ReactNative-触摸事件相关推荐

ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版
ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...
ReactNative 触摸事件处理
ReactNative触摸事件处理对RN触摸事件的捕获与冒泡机制的理解组件A.B.C结构组件A组件B组件C 捕获.冒泡机制 sequenceDiagram A->>A: 是否捕获?若 ...
React Native之触摸事件(Touchable系列和onLongPress)
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮 TouchableHighlight 背景会在用户手指按下时变暗 TouchableNat ...
iOS实现ScrollView中子控件(Button,自定义View)的触摸事件响应
最近要做个信息登记界面,在scrollView中添加了多个button和一个自定义的view(画板)来实现签名效果,画板中实现了touchBegin,touchMove等触摸事件方法.为了使butto ...
cocos2d ccLayer响应触摸事件方法：CCStandardTouchDelegate 与 CCTargetedTouchDelegate
cocos2d ccLayer响应触摸事件方法:CCStandardTouchDelegate 与 CCTargetedTouchDelegate 以下内容转载自:http://blog.sin ...
cocos2d-x触摸事件优先级
CCTouchDispatcher是管理cocos2d-x中全部Touch事件派发的类, CCTouchDispatcher中包括了两个CCTouchHandler的列表, 分别存储Standa ...
android触摸事件分发,Android 事件分发机制
Android 事件分发机制一直让人头痛,之前也是面向 GitHub 编程得过且过.今天下定决心了解一下,以便后面自己定制 View 效果.Android 触摸事件有三个基本类型:ACTION_DOW ...
Android之Android触摸事件传递机制
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/53431274 本文出自:[顾林海的博客] ##前言关于Android ...
h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
Android开发--事件的处理/按键按下，弹起，触摸事件等
android中的事件类型分为按键事件和屏幕触摸事件事件是我们在于UI交互式发生的,我们点击一个按键时,可能就已经除非好几个事件,例如我们点击数字键"0",他会涉及到按下事件,和 ...

ReactNative-触摸事件

使用方法只需将需要使用触摸功能的组件包裹即可

ReactNative-触摸事件相关推荐

最新文章

热门文章