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

Question

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

我想进行设置，以便用户可以在任何空白框上点击手指并向四周拖动手指以突出显示那些框。

我已经使用台式机上的mousedown /mouseover/ mouseup和移动浏览器的touchstart /touchmove/ touchend为组件的Web版本设置了类似的功能，但是我m在React Native中无法创建相同的效果。

[进行搜索后，我遇到了一个叫做PanResponder（https://reactnative.dev/docs/panresponder）的东西，我怀疑如果正确设置，将会得到我想要的东西。但是，文档并未对各种平移处理程序的工作原理进行过多解释。

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

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是否适合用于我要完成的任务？如果是这样，我该如何更改它才能得到我想要的？如果没有，我应该怎么用呢？谢谢。

Answer 1

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