試圖刷掉react-native FlatList中的項目但不獲取onResponderTerminationRequest事件

Question

我正在使用react-native我有一個顯示一系列通知的FlatList。 我使用內置的手勢響應系統允許用戶刷掉他們不再感興趣的通知。

我的清單項目就是這樣......

<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是否足以在產生控制之前開始滾動？

或者，有沒有另一種方法來處理這個感覺像一個很好的可滾動列表，但仍然允許左/右滑動沒有短路手勢？

我確定這有關於Android VM的問題，以及我所擁有的所有Android物理設備。 我還沒有確認它是否也是IOS設備或模擬器上的問題。

Answer 1

有一個名為https://github.com/gitboss2000/react-native-swipeable-flat-list的庫

我希望它比你的組件更適合你。 他們的實現不是那么復雜，也許你可以通過它來修復你的組件。