react-navigation v5：尝试使用“ mode：modal”实现“ ActionSheet” UI

Question

我正在尝试使用模式模式通过react-navigation v.5实现ActionSheet风格的UI（like this）。

到目前为止，屏幕快照是我对example/ModalPresentationStack.tsx文件仅进行了一些样式更改后的截图。基本上只是将position: 'absolute', bottom: 0添加到cardStyle中。 （旁注：我也尝试过flex: null期望它会折叠到屏幕内容的高度，但它根本不会折叠到任何高度。）

问题

这与我对ActionSheet UI的期望非常接近。剩下的唯一一件事就是能够从模式的顶部拖动并关闭模式（通常在模式的顶部带有水平把手）。

我从文档中了解到，有一个gestureResponseDistance允许我们配置我们可以向屏幕顶部拖动并向后导航（关闭ActionSheet），但是由于我想要高度根据内容使模态具有动态性，我正在寻找一种使gestureResponseDistance尊重模态高度的方法。

想法

我的想法是添加车把并用PanGestureHandler包裹它，并在拖动时调用pop()，但这实在太微不足道了，我看不出有什么方法可以实现将拖动手势与导航动画挂钩。

恕我直言，我以某种方式认为导航手势处理区域的位置应相对于屏幕卡本身，以便始终可以将屏幕卡从其所在位置拖拽并关闭，而不是相对于屏幕（即距屏幕X距离）屏幕顶部）。

深入研究代码，我不确定是否可以仅通过将<PanGestureHandler />移入卡<Animated.View />内来实现此行为。 （Code）