React Native中Touch机制（PanResponder）的研究

最新推荐文章于 2023-04-13 16:14:33 发布

自带小鱼干

最新推荐文章于 2023-04-13 16:14:33 发布

阅读量759

点赞数 3

文章标签： react native

本文链接：https://blog.csdn.net/weixin_44078378/article/details/119450656

版权

本文详细探讨了React Native中的PanResponder机制，包括基础使用、方法含义、响应注意事项、事件参数解析以及在多层响应和多点触控场景下的应用。通过示例代码解释了如何设置和处理触摸事件，帮助开发者理解和避免使用中的常见问题。

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

文章目录

前言
了解PanResponder
多层响应
多点触控
参考文档

前言

在项目中遇到了需要自定义组件来实现一些较为复杂的功能，之前还在嫌麻烦没有研究，现在做了一个基础的了解，希望给新手可以提供一些帮助以及避免一些踩坑。

了解PanResponder

PanResponder的最基础使用

我们来看看在代码里要如何使用PanResponder
首先要引入

import {
    PanResponder } from 'react-native';

然后在**componentWillMount()**中使用，使用PanResponder进行创建

 componentWillMount() {
   
    this._panResponder = PanResponder.create({
   
      onStartShouldSetPanResponder: (evt, gestureState) => {
   
        return true;
      },
      onMoveShouldSetPanResponder: (evt, gestureState) => {
   
        return true;
      },
      onPanResponderGrant: (evt, gestureState) => {
   
      //写事件方法
      },
      onPanResponderMove: (evt, gestureState) => {
   
      //写事件方法
      }