Question

我使用react-native 我有一个显示一系列通知的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是否足以在产生控制权之前开始滚动？

或者，是否有另一种方法来处理这个感觉就像一个漂亮的可滚动列表，但仍然允许左/右滑动而不需要短路手势？

我确定这在Android VM和我拥有的所有Android物理设备上都存在问题。我还没有确认它是否也是IOS设备或模拟器上的问题。

Answer 1

有一个叫做的图书馆 https://github.com/gitboss2000/react-native-swipeable-flat-list

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

试图刷掉react-native FlatList中的项目但不获取onResponderTerminationRequest事件

1 个答案: