[React-Native PanResponder拖拽实现]

最新推荐文章于 2024-06-25 09:44:25 发布

iOSTianNan

最新推荐文章于 2024-06-25 09:44:25 发布

阅读量3.7k

点赞数 1

分类专栏： react-native 文章标签： RN PanResponder 拖拽动画位置偏移

本文链接：https://blog.youkuaiyun.com/iOSTianNan/article/details/85095788

版权

本文介绍了在React-Native中利用PanResponder处理拖拽操作时遇到的问题和解决方案，包括拖拽与TouchableOpacity点击事件的冲突、与ScrollView手势滑动冲突，以及通过绝对布局和相对布局实现拖拽的示例。文中详细讲解了PanResponder的API和关键参数，如gestureState，用于动态调整组件位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新场景

一个可点击且可拖拽的按钮, 悬浮于ScrollView 上,
将会面临两个手势冲突
1.拖拽与 TouchableOpacity 的 onPress 问题…
2.拖拽与 ScrollView的手势滑动冲突问题…

补充两个链接:

TouchOpacity 点击事件与拖拽移动的冲突问题

对于该问题, 可以看这个链接, 上面说的挺好的, 总结一下就是
通过设置一个 justOnlyTouch 标识, 通过 Math.abs(gestureState.dx) 的移动距离来判断,用户做了移动还是点击

 // 单点手势开始
  _onPanResponderGrant(e: any) {
   
    this.justOnlyTouch = true;
    }
 // 移动手势处理
  _onPanResponderMove(evt: any, g: any) {
   
    //2. 根据触发点计算真实的左侧,顶侧位移变化

    if (Math.abs(g.dx) > 5 && Math.abs(g.dy) > 5) {
   
      this.justOnlyTouch = false;
    } else {
   
      this.justOnlyTouch = true;
    }
    if (!this.justOnlyTouch) {
   
      this.setState({
   
        marginLeft: realMarginLeft,
        marginTop: realMarginTop,
      },)
    }
  }
// 手势结束
  _onPanResponderEnd(evt: any, gestureState: any) {
   
	// 手势结束.判断用户是否仅单点了按钮, 如果是, 则只需点击事件函数即可
    if (this.justOnlyTouch) {
   
      this.setState({
   visible: true});
      return;
    }
   }

================== 2021分割线 == ==========

1.PanResnponder相关Api

    componentWillMount() {
   
        this.panResponder = PanResponder.create({
   

            /***************** 要求成为响应者 *****************/
            // 单机手势是否可以成为响应者
            onStartShouldSetPanResponder: (evt, gestureState) => true,
            // 移动手势是否可以成为响应者
            onMoveShouldSetPanResponder: (evt, gestureState) => true,
            // 拦截子组件的单击手势传递,是否拦截
            onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
            // 拦截子组件的移动手势传递,是否拦截
            onMoveShouldSetPanResponderCapture

最低0.47元/天解锁文章