0

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

在此处输入图像描述

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

我已经使用mousedown/ mouseover/mouseup在桌面和touchstart/ touchmove/touchend移动浏览器上为组件的Web 版本设置了类似的东西，但是我在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用于我想要完成的任务是否正确？如果是这样，我需要如何更改它以获得我想要的？如果没有，我应该改用什么？谢谢你。

4

1 回答 1

0

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

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

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

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

于 2020-05-11T18:19:42.417 回答