Pangesturehandler и Scrollview не работают вместе - PullRequest
Новая
       28

Pangesturehandler и Scrollview не работают вместе

1 голос
/ 04 октября 2019

Я кодировал меню, используя 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>
        );
    }
...