React native React Native-有没有办法在PanGestureHandler中实现滚动视图？（安卓和iOS）

我正在尝试构建一个跨平台的可滚动的底部表单组件，其react native类似于Apple（Apple Maps）、Yelp（Map Search）等实现的组件

我曾尝试使用反应原生的动画底片，它允许在底片中滚动行为，但主要问题是底部片材没有正确地响应滑动的速度，导致一些低于标准的UX。 相反，我使用PanGestureHandler构建了一个组件，如下所示。我想在组件中实现一个可滚动列表。当前，可滚动视图将在iOS上滚动。对我来说，在android上滚动根本不起作用

此外，我希望ScrollView在列表到达顶部时将滑动传递给PanGestureHandler。目前，在iOS上，当PanGestureHandler中存在ScrollView时，用户必须使用ScrollView上方的句柄来拖动/滑动底部工作表

我肯定有办法，但我已经走到了死胡同。感谢您的指导和帮助

import React from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import Animated from 'react-native-reanimated';
import { PanGestureHandler, State } from 'react-native-gesture-handler';
import { onGestureEvent, withSpring, clamp } from 'react-native-redash';

const { Value } = Animated;
const screenHeight = Dimensions.get('screen').height;

const BottomSheet = ({ snapTop, snapCenter, snapBottom, renderContent }) => {
    const SNAP_TOP = screenHeight * snapTop;
    const SNAP_BOTTOM = screenHeight * snapBottom;
    const SNAP_CENTER = screenHeight * snapCenter;

    const translationY = new Value(0);
    const velocityY = new Value(0);
    const state = new Value(State.UNDETERMINED);
    const offset = new Value(SNAP_TOP);
    const gestureHandler = onGestureEvent({
        translationY,
        state,
        velocityY
    });

    const springConfig = {
        damping: 20,
        mass: 1,
        stiffness: 150,
        overshootClamping: false,
        restSpeedThreshold: 0.1,
        restDisplacementThreshold: 0.1
    };
    const translateY = clamp(
        withSpring({
            state,
            offset,
            value: translationY,
            velocity: velocityY,
            snapPoints: [SNAP_TOP, SNAP_CENTER, SNAP_BOTTOM],
            config: springConfig
        }),
        SNAP_BOTTOM,
        SNAP_TOP
    );

    return (
        <PanGestureHandler {...gestureHandler}>
            <Animated.View
                style={[
                    styles.bottomSheet,
                    {
                        height: screenHeight,
                        transform: [{ translateY }]
                    }
                ]}
            >
                {renderContent}
            </Animated.View>
        </PanGestureHandler>
    );
};

const styles = StyleSheet.create({
    bottomSheet: {
        position: 'absolute',
        zIndex: 1,
        left: 0,
        right: 0,
        borderTopRightRadius: 12,
        borderTopLeftRadius: 12,
        elevation: 3,
        shadowColor: 'black',
        shadowOpacity: 0.1,
        shadowRadius: 5,
        shadowOffset: { width: 0, height: -1 },
        backgroundColor: '#ffffff'
    }
});

export default BottomSheet;

从“React”导入React；
从“react native”导入{样式表，维度}；
从“react native reanimated”导入动画；
从“反应本机手势处理程序”导入{PanGestureHandler，State}；
从“react native redash”导入{OnTestureEvent，withSpring，clamp}；
常量{Value}=动画；
const screenHeight=尺寸.get（'screen'）。高度；
const BottomSheet=（{snapTop、snapCenter、snapBottom、renderContent}）=>{
const SNAP_TOP=屏幕高度*snapTop；
const SNAP_BOTTOM=屏幕高度*snapBottom；
常量捕捉中心=屏幕高度*捕捉中心；
const translationY=新值（0）；
常数速度y=新值（0）；
常量状态=新值（状态未确定）；
常数偏移=新值（捕捉顶部）；
const gestureHandler=onGestureEvent({
翻译，
国家,，
速度
});
常量springConfig={
阻尼：20，
质量:1,，
刚度：150，
超调幅度：错误，
restSpeedThreshold:0.1，
restDisplacementThreshold:0.1
};
常数translateY=钳位(
带弹簧({
国家,，
抵消，
值：translationY，
速度：velocityY，
捕捉点：[捕捉顶部、捕捉中心、捕捉底部]，
配置：springConfig
}),
啪的一声，
按扣
);
返回(
{renderContent}
);
};
const styles=StyleSheet.create({
底片：{
位置：'绝对'，
zIndex:1，
左:0,，
右:0,，
BorderTopRight半径：12，
borderTopLeftRadius:12，
标高：3，
阴影颜色：“黑色”，
阴影不透明度：0.1，
阴影半径：5，
阴影偏移：{宽度：0，高度：-1}，
背景颜色：“#ffffff”
}
});
导出默认底片；