RNGH和RN自带的手势

543 阅读2分钟

背景

为什么React Native在自己有一套Touchable组件之后,又有了RNGH这套交互库呢?而且它的使用范围还相当的广泛。

RNGH介绍

react native gesture handler简称rngh,旨在替换react native系统自带的交互系统Gesture response system。这套系统提出的目的

  1. 让组件知晓当前用户的手势行为;
  2. 给用户的手势反馈
  3. 可以让用户取消当前手势,比如拖走代表取消了点击行为。

react native提供了touchable这个抽象类给所有可以被点击的组件来实现。如果你用过panResponder的话,那就很容易能理解这套系统,因为它的实现跟panResponder很像,或者说是在它底层。

官网的说法是:为了给组件提供更多的手势控制;为了突破原来手势系统的性能限制。而且使用RNGH可以直接使用客户端系统的手势系统,而不用自己搞一套,可以保证体验的一致性;另一方面,一些手势的动画,直接使用了useNativeDriver,性能更好。

功能特点

手势

RNGH提供了更多的手势支持,还有手势组合,手势包括pan,tap,longpress,Rotation gesture,pinch gesture,Fling gesture等,还可以通过参数对这些手势进行额外的扩展,如tap可以扩展成双击

组件

提供了button,swipe,touchable,drawer等类型的组件,用来直接使用

缺陷

手势组件只会锚定它的子组件,而不会创建新的组件,因此它不能进行嵌套使用

状态

手势的nativeEvent.state参数可以标记当前手势的状态,UNDETERMINED,BEGAN,ACTIVE,END,CANCELLED,FAILED这几个状态之间相互跳转

手势组合

  • 同时识别: 比如说我们相册编辑里面,可能同时有缩放和移动的手势,需要同时进行监听

  • 手势等待: 某一个手势的判定需要等待另一个手势的判定,比如一个同时绑定了tap和doubletap的按钮,一般来说doubletap肯定会触发tap,但是对于交互上来说是不合理的。tap需要等待double tap的判定结束后,才可以进行判定触发。

总结

总的来说,RNGH有点像RN版的手势库,它跟RN原来的手势系统不一样,原来的手势系统是在RN组件的基础上做的,有点像web的手势,而RNGH是直接在native上做的,然后做了一层RN组件的代理。

参考

github.com/software-ma… RNGH代码地址 docs.swmansion.com/react-nativ… 文档地址 blog.csdn.net/sinat_17775…