React Native-使拉出式抽屉组件不仅紧贴手指

Question

我目前正在制造一个组件，该组件允许使用react-native-gesture-handler从底部拉起抽屉。尽管它在大多数情况下都有效，但我想不出如何使它在开始向上滑动时不仅能抓住手指。

以下是显示当前行为的GIF：

这是我的代码：

import React, { Component } from 'react'
import { Text, Animated, Dimensions } from 'react-native'
import { PanGestureHandler, State } from 'react-native-gesture-handler'

export class BottomDrawer extends Component {
  constructor(props){
    super(props);
    this._startTopPos = Dimensions.get('window').height - props.topPosOffset;
    this.topPos = new Animated.Value(Dimensions.get('window').height - props.topPosOffset)
    this.state = {
      open: false
    };
    this.onHandlerStateChange = this.onHandlerStateChange.bind(this)
  }

  onHandlerStateChange(event){...}

  render() { 
    // Limit the range of the gesture
    this.topPosFinal = this.topPos.interpolate({
      inputRange: [this.props.endTopPos, this._startTopPos],
      outputRange: [this.props.endTopPos, this._startTopPos],
      extrapolate: 'clamp'
    })

    return (
      <PanGestureHandler 
        maxPointers={1}
        onGestureEvent={Animated.event([{nativeEvent: {absoluteY: this.topPos}}])}
        onHandlerStateChange={this.onHandlerStateChange}
      >
        <Animated.View style={{position: "absolute", transform: [{translateY: this.topPosFinal}], width: '100%'}}>
          {this.props.children}
        </Animated.View>
      </PanGestureHandler>
    )
  }
}

export default BottomDrawer