15｜Gesture（上）：如何实现一个拖拽动效？
蒋宏伟
你好，我是蒋宏伟。
我刚开始做 React Native 开发的时候，曾经被手势问题困扰过好几次。
第一次，我想在 Android 上实现类似 iOS 的下拉刷新效果。你可能知道，iOS 的 ScrollView 组件是有回弹属性 bounces 的。当开启回弹效果时，ScrollView 的内容区顶到头还可以继续往下拉，但 Android 的 ScrollView 组件就没有 bounces 属性，实现不了这种带回弹的下拉刷新效果。
第二次，我是想实现类似抖音评论区的手势动效。这个手势动效在上下方向存在三个手势，分别是最外层视频区域的上下切换动画、评论框的上下拖拽动画和评论内容的上下滚动动画。这种多视图、多手势的动效，本身就非常复杂，而且当时 React Native 框架自带的手势动画模块的能力太弱，也实现不了。
第三次，我想实现类似淘宝首页的手势动效。淘宝首页头部区域是由轮播图、金刚区等组成的固定内容区域，底部区域是由多 Tab 、多长列表组成的可左右切换、可上下滚动的区域，实现难度非常高。
我提到的这三个手势动效的需求，都需要手势和动画搭配在一起才能实现。
但当初我用的是 React Native 的 0.44 版本，因为社区的 Gesture 手势库 react-native-gesture-handler 和 Reanimated 动画库 react-native-reanimated 都还不太成熟，所以我选择了 React Native 框架自带的手势模块 PanResponder 和动画模块 Animated 进行开发。但是仅仅只是如何解决手势冲突这个问题，就把我拦住了，只能降级处理。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
React Native开发中的手势问题一直是一个挑战，但通过利用Gesture手势库和Reanimated动画库，可以解决这些问题。本文分享了三个具体的需求，包括实现类似iOS下拉刷新效果、抖音评论区手势动效以及淘宝首页的手势动效。在React Native 0.68版本中，Gesture v2手势库和Reanimated v2动画库的提前适配解决了这些问题。文章重点围绕解决手势冲突的问题展开，通过三个关卡逐级突破手势难题。作者蒋宏伟强调了Gesture手势库和Reanimated的结合使用，以及其在UI线程中运行的优势。总的来说，本文为读者提供了解决复杂手势问题的思路和工具，为日后遇到类似需求提供了解决方案。文章内容涉及了基础手势原理和使用，以及进阶内容，特别是如何解决手势冲突的问题。读者可以通过本文快速了解如何利用Gesture手势库和Reanimated动画库解决React Native开发中的手势问题，为日后的开发提供了技术支持和解决方案。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Native 新架构实战课》，新⼈⾸单¥59
《React Native 新架构实战课》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
Hadwz老师，用Gesture 手势库和 Reanimated，实现在ScrollView里上下拖拽一个元素，并在元素到达列表的顶部/底部的时候，滚动ScrollView，让列表和元素同时移动，有什么实现思路吗？作者回复: 你遇到的问题，大家也经常遇到，就是手势冲突的问题，在 Gesture 中下两讲中有回答。
2022-05-06
ZouLe上 Reanimated v2 和 Gesture v2 就不能用原来的浏览器debug模式开发了，这个转换跨度还是蛮大的 😄作者回复: 是的。主要还是因为 JSI 和 Hermes 的原因。其实 Flipper 功能更强大。
2022-05-02
风之化身讲的蛮好，建议录个小视频看下最终效果会更直观点～2022-05-053
*****Gesture.Pan 手指离开屏幕后，下次在拖动就无效了2024-03-11归属地：福建
dao手势这三节课，学习了好几周 💦 试着做了作业一 https://bit.ly/3HXMCae ，使用了 react-native-gesture-handler 的 Swipeable 组件完成的。尝试着自己用 Reanimated 写，发现对我这新手难度大了写 😂2022-06-29
收起评论