react-native - Pangesturehandler 和 Scrollview 不能一起工作

Question

我使用 PanGestureHandler 和 ScrollView 编写了一个菜单。

问题是; 当 PanGestureHandler 处于活动状态时，ScrollView 的滚动不起作用。

我的意思是滑动功能正在工作，但滚动不起作用。

我的期望是同时使用这两个功能。

我在下面分享了我的实现代码。

任何想法？_

构造函数

    constructor(props) {
        super(props);
        this.state = {
            enable: true,
        };


        const dragX = new Value(0);
        const dragY = new Value(0);
        const state = new Value(-1);

        const offsetY = new Value(0);

        this.gestureHandler = event([
            {
                nativeEvent: {
                    translationX: dragX,
                    translationY: dragY,
                    offsetY,
                    state
                }
            }
        ]);

        this.transitionX = block([
            cond(
                eq(state, State.ACTIVE),
                [

                    interpolate(dragX, {
                        inputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
                        outputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
                        extrapolate: "clamp"
                    }),
                ],
                [

                    cond(
                        eq(state, State.END),
                        [
                            call([], () => { this.setState({ enable: true }) }),
                            0,
                        ],
                        cond(
                            eq(state, State.CANCELLED),
                            0,
                            dragX
                        )
                    )

                ]
            )
        ]);

    }

使成为

    render() {
        const { navigation } = this.props;

        return (
            <View style={{ flex: 1 }} >


                <ScrollView
                    ref={this.scrollRef}
                    waitFor={this.state.enable ? this.ref : this.scrollRef}
                    scrollEventThrottle={40}
                    onScrollEndDrag={() => { this.setState({ enable: true }) }}
                    onScrollBeginDrag={() => { this.setState({ enable: false }) }}
                >

                    <PanGestureHandler
                        enabled={this.state.enable}
                        ref={this.ref}
                        onGestureEvent={this.gestureHandler}
                        onHandlerStateChange={this.gestureHandler}>

                        <Animated.View
                            style={{
                                transform: [
                                    {
                                        translateX: this.transitionX,
                                    },
                                ]
                            }} >

                            {
                                ...
                            }
                        </Animated.View>


                    </PanGestureHandler>
                </ScrollView>
            </View>
        );
    }