如何在 React Native 表格中点击并拖动？答案

【问题标题】：How do I do tap-and-drag in a React Native table?如何在 React Native 表格中点击并拖动？
【发布时间】：2020-05-11 15:56:34
【问题描述】：

我有一个表格，实际上只是一堆样式化的 View 元素，在 React Native 中如下所示：

我想进行设置，以便用户可以用手指点击任何空框并拖动手指以突出显示这些框。

我已经使用mousedown/mouseover/mouseup 在桌面上使用touchstart/touchmove/touchmove/touchend 为移动浏览器设置了类似的组件的网络版本，但我在 React Native 中创建相同的效果时遇到问题。

在进行了一些搜索之后，我发现了一个名为 PanResponder (https://reactnative.dev/docs/panresponder) 的东西，我怀疑如果设置正确会得到我想要的东西。但是，文档并没有详细解释各种 pan 处理程序是如何工作的。

按照文档中的示例，我编写了以下起始代码：

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: (evt, gestureState) => true,
    onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
    onMoveShouldSetPanResponder: (evt, gestureState) => true,
    onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

    onPanResponderGrant: (evt, gestureState) => {
        console.log('onPanResponderGrant gestureState');
        // console.log('onPanResponderGrant gestureState', gestureState);
    },

    onPanResponderMove: (evt, gestureState) => {
        console.log('onPanResponderMove gestureState');
        // console.log('onPanResponderMove gestureState', gestureState);
    },

    onPanResponderTerminationRequest: (evt, gestureState) => true,

    onPanResponderRelease: (evt, gestureState) => {
        console.log('onPanResponderRelease');
    },

    onPanResponderTerminate: (evt, gestureState) => {
        console.log('onPanResponderTerminate');
    },

    onShouldBlockNativeResponder: (evt, gestureState) => {
        return true;
    }
});

这样，当我点击特定框并在该框内移动时，我可以触发事件。但是，只要我将手指移到下一个框，onPanResponderTerminate 事件就会触发，而我不会触发任何其他事件。

我的问题是：PanResponder 是否适合用于我想要完成的任务？如果是这样，我需要如何更改它以获得我想要的？如果没有，我应该改用什么？谢谢。

【问题讨论】：

标签： react-native drag panresponder

【解决方案1】：

虽然完整的答案涉及很多事情，但我遇到的基本问题是我将PanResponder 附加到每个空盒子，实际上我需要做的是将一个PanResponder 附加到View 元素包含所有其他单独的 View 元素框。

此外，有必要将onPanResponderTerminationRequest 设置为false 以避免触发onPanResponderTerminate 事件，这也会导致问题。

通过做这两件事，我能够开始实现我想要实现的目标。除此之外，我还必须做一些事情，比如有条件地将ScrollView 元素上的scrollEnabled 设置为false 等，以在我的手指在表格框上点击和拖动时阻止屏幕滚动。

长话短说，以上内容应该可以让其他有同样问题的人开始，但要完成我想要实现的目标还有更多工作要做，但那是我之前无法克服的最初的小山。谢谢。

【讨论】：