如何使用 react-native-gesture-handler 限制用户可以拖动元素的垂直空间？

Question

我正在尝试从屏幕底部构建一个滑动菜单。我面临的主要问题是设置用户可以拖动菜单多远的限制。

背景：

我查看了react-native-gesture-handler github上的示例。试图摆弄弹跳示例。但仍然无法弄清楚我需要做什么来设置限制。

代码：

目前我的设置如下：

import React, { Component } from 'react';
import {
    Animated,
   Text,
   View,
   Image } from 'react-native';
import { 
   PanGestureHandler, 
   USE_NATIVE_DRIVER, 
   State } from 'react-native-gesture-handler';

export default class Menu extends Component {
   constructor(props) {
      super(props);

        this._translateY = new Animated.Value(0);
      this._lastOffset = { y: 0 };
      this._onPanGestureEvent = Animated.event(
         [
            {
               nativeEvent: {
                  translationY: this._translateY,
               }
            }
         ], 
            {
               useNativeDriver: USE_NATIVE_DRIVER
            }
      );
      this._onHandlerStateChange = event => {
            if (event.nativeEvent.oldState === State.ACTIVE) {
               this._lastOffset.y += event.nativeEvent.translationY;
               this._translateY.setOffset(this._lastOffset.y);
               this._translateY.setValue(0);
            }
      };
   }

   render() {
      return (
         <View 
            style={{
               position: 'absolute', 
               left: 0, 
               right: 0, 
               top: 0, 
               bottom: 0,
               flex: 3,
               flexDirection: 'column',
               justifyContent: 'flex-end',
               alignItems: 'stretch'
            }}>
            <Animated.View style={
                     [
                        {
                           height: 60,
                        }, 
                        {
                           transform: [
                              {
                                 translateY: this._translateY
                              }
                           ]
                        }
                     ]
               }>
               <PanGestureHandler
               {...this.props}
               onGestureEvent={this._onPanGestureEvent}
               onHandlerStateChange={this._onHandlerStateChange}>
                  <View 
                     style={
                        {
                           height: 60,
                           backgroundColor: 'white',
                           borderWidth: 0.5,
                           borderColor: '#ccc',
                        }
                     }>
                     <Text style={{height: '100%', paddingLeft: 20, paddingTop: 20}}>Hello world</Text>
                  </View>
               </PanGestureHandler>

               <View style={
                        {
                           height: 200,
                           backgroundColor: 'white',
                           borderWidth: 0.5,
                           borderColor: '#ccc',
                        }
                     }>
                  <Text style={{height: '100%', paddingLeft: 20, paddingTop: 20}}>
                    Hello world Hello world Hello world Hello world Hello 
                    world Hello world Hello world Hello world Hello world Hello world Hello 
                    world Hello world Hello world Hello world Hello world Hello world Hello 
                    world Hello world Hello world Hello world Hello world Hello world Hello 
                    world Hello world Hello world Hello world 
                  </Text>
               </View>
            </Animated.View>
         </View>
      )
   }
}

这给出了这个结果：

折叠菜单

当我向上滑动时，我得到：

扩展菜单，但越界

当我一直向下滑动时，菜单消失了：

缩小菜单，但越界

目标：

我希望菜单在向上滑动时弹出到它的全尺寸，然后在向下滑动时缩小到只有标题。

向上滑动应该像这样结束：向上 滑动时的预期结果

向下滑动最终应该是这样的： 向下滑动时的预期结果

预先感谢您提供的任何帮助，我们将不胜感激。