ios - 在平移手势处理程序中禁用滚动视图的滚动不会触发本机反应中的平移手势事件

Question

所以我有这个模态底部表，里面有一个滚动视图。当滚动 y 偏移量为 0（滚动到顶部）时，应禁用滚动并触发平移手势。平移手势基本上沿 y 轴平移模态。这是代码，

import React, { useState, useEffect, useRef } from "react"
import { View, Text, TouchableOpacity } from "react-native"
import { PanGestureHandler, ScrollView } from "react-native-gesture-handler"
import Animated, {
    useAnimatedGestureHandler,
    useAnimatedStyle,
    useSharedValue,
    withTiming
} from "react-native-reanimated"
const TestComponent: React.FC = () => {
    const panRef = useRef<PanGestureHandler>(null)
    const scrollRef = useRef<ScrollView>(null)

    const [scrollEnabled, setScrollEnabled] = useState(true)

    const y = useSharedValue(400)
    const animateY = useAnimatedStyle(() => {
        return {
            transform: [{ translateY: y.value }]
        }
    })

    const swipe = useAnimatedGestureHandler({
        onStart: (e, ctx: { startY: number }) => {
            ctx.startY = y.value
        },
        onActive: (e, ctx) => {
            y.value = ctx.startY + e.translationY
        }
    })

    useEffect(() => {
        y.value = withTiming(0)
    }, [])

    return (
        <View
            style={{ paddingVertical: 50, flex: 1, backgroundColor: "black" }}>
            <TouchableOpacity onPress={() => (y.value = 0)}>
                <Text style={{ color: "white" }}>Reset</Text>
            </TouchableOpacity>
            <PanGestureHandler ref={panRef} onGestureEvent={swipe}>
                <Animated.View
                    style={[
                        {
                            position: "absolute",
                            bottom: 0,
                            backgroundColor: "green",
                            height: 400,
                            width: "100%"
                        },
                        animateY
                    ]}>
                    <ScrollView
                        ref={scrollRef}
                        scrollEventThrottle={16}
                        scrollEnabled={scrollEnabled}
                        onScrollBeginDrag={e => {
                            const offset = e.nativeEvent.contentOffset
                            if (offset.y <= 0) {
                                setScrollEnabled(false)
                                scrollRef.current?.scrollTo({ x: 0, y: 0 })
                            }
                        }}
                        waitFor={scrollEnabled ? scrollRef : panRef}>
                        {new Array(30).fill(1).map((x, i) => {
                            return (
                                <View key={i.toString()}>
                                    <Text>#Item {i.toString()}</Text>
                                </View>
                            )
                        })}
                    </ScrollView>
                </Animated.View>
            </PanGestureHandler>
        </View>
    )
}

export default TestComponent

但是，即使我在第一次尝试禁用滚动时也不会触发平移手势。但是在第二次尝试时它可以工作。

标签： iosreactjsreact-native