react native手势触摸

简介

在诸多移动应用中，需要有许多手势识别的使用场景。比如当涂抹、上滑、下滑、侧滑、拖动等，都涉及到方方面面的功能交互。而在react native中，就有提供处理这些手势的API，下面就来一一介绍相关的响应方法。

Touchable组件

rn也有提供一些比较基础的触摸组件，比如Touchable组件

TouchableWithoutFeedback：这个组件在点击后没有任何的视觉反馈，并且只支持一个子节点（不能为0 && 不能>1），并且该组件不支持加style样式。
```
<TouchableWithoutFeedback onPress={onPress}><View style={styles.button}><Text>click me！</Text></View>
</TouchableWithoutFeedback>
```
delayLongPress: 从 onPressIn 开始，到 onLongPress 被调用的延迟。单位:毫秒

delayPressIn: 从触摸操作开始到 onPressIn 被调用的延迟。单位:毫秒

delayPressOut:从触摸操作结束开始到 onPressOut 被调用的延迟。单位:毫秒

disabled:如果设为 true，则禁止此组件的一切交互

hitSlop:这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset变得更大。 注意： 触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）

pressRetentionOffset:在当前视图不能滚动的前提下指定这个属性，可以决定当手指移开多远距离之后，会不再激活按钮。但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。

还有一些常用的事件：

onBlur onFocus onLayout onLongPress onPress onPressIn onPressOut
TouchableOpacity：当使用这个组件并点击时，组件的透明度会根据你设置的activeOpacity而变化，其中activeOpacity这个值的设定范围在0～1之间，默认值为0.2

并且该组件还有一些Apple Tv限定的属性：
- enabled: 如果为"true"，则启用动画效果。默认为"true"。
- shiftDistanceX: X轴的位移距离默认值2.0.
- shiftDistanceY: Y轴的位移距离默认值 2.0.
- tiltAngle: 倾斜角默认值0.05.
- magnification: 放大默认值 1.0.
- pressMagnification: 点击区域放大默认值 1.0.
- pressDuration: 点击持续时间默认值0.3.
- pressDelay: 点击延时默认值 0.0.
```
<TouchableOpacitystyle={styles.button}onPress={this.onPress}activeOpacity={0.8}><Text>click me！</Text>
</TouchableOpacity>
```
TouchableHighlight：点击改组件时，不仅透明度会变低，还可以设置底层颜色，使得视图变暗或变亮。

onHideUnderlay：底层颜色被隐藏的时候调用

onShowUnderlay：底层颜色被显示的时候调用

underlayColor：底层颜色
```
<TouchableHighlightactiveOpacity={0.8}underlayColor="red"onPress={() => alert('Click Yesssss!')}><MyComponent />
</TouchableHighlight>;
```
TouchableNativeFeedback（仅限Android平台）：该组件利用原生状态来渲染触摸的反馈，其点击显示的背景可以通过background属性来自定义。

该属性在Android5.0以后可实现点击展示水波纹动效

属性：

background:决定在触摸反馈的时候显示什么类型的背景

useForeground: 当想要在水波纹效果，并且不被背景遮盖住的时候，可以设置为true（该属性使用前需要先通过调用**TouchableNativeFeedback.canUseNativeForeground()**查看是否支持，并且需要Android版本>=6.0）

方法：

static SelectableBackground(rippleRadius: ?number):

static SelectableBackgroundBorderless(rippleRadius: ?number):

static Ripple(color: string, borderless: boolean, rippleRadius: ?number):
```
<TouchableNativeFeedbackonPress={() => {alert('Click Yesssss!')}}//设置背景为水波纹效果，颜色为红色，borderless：true则会涟漪到视图范围外background={TouchableNativeFeedback.Ripple('red', true)}><View style={styles.touchable}><Text style={styles.text}>TouchableNativeFeedback</Text></View>
</TouchableNativeFeedback>
```
ps：TouchableOpacity和TouchableHighlight属性都继承自TouchableWithoutFeedback

PanResponder类

当我们在移动设备上进行手势交互时，所进行对操作会比web上更复杂。而PanResponder类可以将多点触摸操作协调成一个手势，使得一个单点触摸可以接受更多的触摸操作。

我们可以通过PanResponder.create({options})方法，去创建手势响应事件。

手势事件一览：

         // 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），是否愿意成为响应者？onStartShouldSetPanResponder?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;      // 如果 View 不是响应者，那么在每一个触摸点开始移动（没有停下也没有离开屏幕）时再询问一次：是否愿意响应触摸交互呢？onMoveShouldSetPanResponder?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;// 如果某个父 View 想要在触摸操作开始时阻止子组件成为响应者，那就应该处理onStartShouldSetResponderCapture事件并返回 true 值。onMoveShouldSetPanResponderCapture?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;onStartShouldSetPanResponderCapture?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;// 手势开始响应onPanResponderGrant?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// 响应者现在“另有其人”而且暂时不会“放权”，请另作安排。onPanResponderReject?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// View 现在要开始响应触摸事件了。这也是需要做高亮的时候，使用户知道他到底点到了哪里。onPanResponderStart?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// 手势移动onPanResponderMove?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// 手势释放onPanResponderRelease?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// 手势结束onPanResponderEnd?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// 另一个容器已经成为了新的响应者，当前手势将被取消。onPanResponderTerminate?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => void;// 当别的想成为响应者，是否放权onPanResponderTerminationRequest?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;// 当前组件是否应该阻止原生组件成为JS响应者onShouldBlockNativeResponder?: (e: GestureResponderEvent, gestureState: PanResponderGestureState) => boolean;

1、在使用手势之前，首先应赋予相应的容器为触摸事件响应者。

可以通过onStartShouldSetResponder和onMoveShouldSetResponder去判断触摸开始时或触摸移动时，是否成为响应者。

举个

react native手势触摸相关推荐

React Native 手势触摸事件机制详解（进阶篇）
源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. 在基础篇,对RN中的触摸事件做了详细的介绍.相信大家对于触摸事件流程机制有了更为清晰的认识.没 ...
React Native 手势触摸事件机制详解（基础篇）
欢迎大家关注[跨平台开发那些事]公众号,定期推送跨平台开发技术实践. 源码已开源到Github,详细代码可以查看:<React Native 触摸事件代码实践>. ...
React Native手势密码组件
本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 这次介绍的React Native手势密码组件为react-native-gesture-password,纯JavaScript ...
React Native之触摸事件(Touchable系列和onLongPress)
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮 TouchableHighlight 背景会在用户手指按下时变暗 TouchableNat ...
前端知识 | React Native手势响应浅析
目前手机市场上,全面屏时代已经势不可挡,为了增大屏幕,一个个物理按键已渐渐消失在手机上.那么,手势将成为在移动应用开发中一个重要的组成部分,移动设备上手势识别要比 web 端复杂得多,往往用户的一个手 ...
大咖说：React Native 全埋点实现原理（内附赠书）
本文主要介绍如何实现 React Native 的全埋点,主要是控件点击 $AppClick 事件.该内容,会默认你有一定的 React Native 开发经验,(若没有,也可参与文末赠书). ■ 作 ...
使用React Native进行气泡动画
by Narendra N Shetty 由纳伦德拉·N·谢蒂(Narendra N Shetty) 使用React Native进行气泡动画 (Bubble animation with React ...
React Native移动框架功能研究
React Native移动框架功能研究此篇只研究React Native框架的功能. 一.React Natvie是什么 React Native是使用React(或者说JS)来开发原生APP的框 ...
React Native开发总结（一）
一.RN优劣势 React Native的设计理念: 既拥有Native的用户体验.又保留React的开发效率优势: 它对比原生开发更为灵活,对比H5体验更为高效. 替代传统的WebView,打开效 ...

react native手势触摸

简介

Touchable组件

PanResponder类

1、在使用手势之前，首先应赋予相应的容器为触摸事件响应者。

react native手势触摸相关推荐

最新文章

热门文章