试图刷掉本机 FlatList 中的项目但没有收到 onResponderTerminationRequest 事件

Question

我正在使用本机反应我有一个显示一系列通知的 FlatList。我使用内置 Gesture Responder System 允许用户滑动他们不再感兴趣的通知。

我的列表项是这样工作的...

<View style={[
            props.style,
            this.state.is_swipeing?{opacity: 0.5}:{},
            (this.state.swipe_direction=="RIGHT")?{backgroundColor:"#CCCCCC"}:{},
        ]}
        onStartShouldSetResponder={(evt)=>{
            console.log('onStartShouldSetResponder');
            return true;
        }}
        onResponderTerminationRequest={(evt)=>{
            console.log('onResponderTerminationRequest');
            if (this.state.swipe_direction == "RIGHT" || this.state.swipe_direction == "LEFT") {
                console.log("dont let go!!!");
                return false;
            }
            console.log("give it up");
            return true;
        }}
        onResponderTerminate={(evt)=>{
            console.log('onResponderTerminate');
            this.setState({is_swipeing: false, start_x: null, start_y: null, swipe_direction: null });
        }}
        onResponderGrant={(evt)=>{
            console.log('onResponderGrant');
            this.setState({is_swipeing: true, start_x: evt.nativeEvent.locationX, start_y: evt.nativeEvent.locationY, swipe_direction: null });
        }}
        onResponderMove={(evt)=>{
            var dx = evt.nativeEvent.locationX - this.state.start_x;
            var dy = evt.nativeEvent.locationY - this.state.start_y;
            if (Math.abs(dx) > Math.abs(dy)) { // big delta X
                if (dx > 40) { // swiping right
                    if (this.state.swipe_direction != "RIGHT") {
                        console.log("Swipeing right");
                        this.setState({ swipe_direction: "RIGHT"});
                    }
                }
                else if (dx < -40) { //swiping left
                    if (this.state.swipe_direction != "LEFT") {
                        console.log("Swipeing left");
                        this.setState({ swipe_direction: "LEFT"});
                    }
                }
                else {
                    if (this.state.swipe_direction != null) {
                        console.log("Not swipeing");
                        this.setState({ swipe_direction: null});
                    }
                }
            }
            else if (Math.abs(dy) > Math.abs(dx)) { // big delta Y
                if (dy > 40) { // swiping down
                    if (this.state.swipe_direction != "DOWN") {
                        console.log("Swipeing down");
                        this.setState({ swipe_direction: "DOWN"});
                    }
                }
                else if (dy < -40) { //swiping up
                    if (this.state.swipe_direction != "UP") {
                        console.log("Swipeing up");
                        this.setState({ swipe_direction: "UP"});
                    }
                }
                else {
                    if (this.state.swipe_direction != null) {
                        console.log("Not swipeing");
                        this.setState({ swipe_direction: null});
                    }
                }
            }
        }}
        onResponderRelease={(evt)=>{
            switch (this.state.swipe_direction) {
                case "UP": {
                    if (props.onSwipeUp) {
                        props.onSwipeUp();
                    }
                    break;
                }
                case "DOWN": {
                    if (props.onSwipeDown) {
                        props.onSwipeDown();
                    }
                    break;
                }
                case "LEFT": {
                    if (props.onSwipeLeft) {
                        props.onSwipeLeft();
                    }
                    break;
                }
                case "RIGHT": {
                    if (props.onSwipeRight) {
                        props.onSwipeRight();
                    }
                    break;
                }
                default: {
                    if (props.onPress) {
                        props.onPress();
                    }
                    break;
                }
            }
            this.setState({is_swipeing: false, start_x: null, start_y: null, swipe_direction: null });
        }}
    >
        {props.children}
    </View>

这一切都很好，直到我的列表中有足够的项目使列表可以滚动。

一旦列表足够长可以滚动，当我向左或向右滑动时，如果我向上或向下移动，那么 FlatList 会窃取响应者跟踪，并且我会收到 onResponderTermination 事件。使用户几乎不可能滑动列表中的项目。

我希望（根据上面引用的文档）我应该得到一个 onResponderTerminationRequest 事件，询问我是否愿意让步。但是那个事件永远不会被触发。

我的问题是...有没有什么方法可以让我保持滑动，以便我可以确定 delta Y 是否足够重要以在放弃控制之前开始滚动？

或者，是否有另一种方法可以解决这个问题，感觉就像一个很好的可滚动列表，但仍然允许滑动 left/right 而不会短路手势？

我确定这在 android 虚拟机和我可以使用的所有 android 物理设备上都有问题。我还没有确认这是否也是 IOS 设备或模拟器的问题。

Answer 1

有一个库叫做 https://github.com/gitboss2000/react-native-swipeable-flat-list

我希望它比您的组件更适合您。他们的实现并不那么复杂，也许你可以通过它来修复你的组件。

试图刷掉本机 FlatList 中的项目但没有收到 onResponderTerminationRequest 事件

Trying to swipe away items in react-native FlatList but not getting onResponderTerminationRequest events

android

touch

gestures

ios

react-native