使用Pan Responseer响应本机部分模态

Question

我正在尝试重新创建出现在屏幕上的元素，并且可以通过滚动手势进行扩展，关闭或调整其大小。

我不知道此元素的真实名称，但是可以在例如Apple Maps，Google Maps或Apple Music中找到。

部分模态示例：

我尝试创建一个具有透明背景和透明元素的模式屏幕，并调整其大小以扩展内容元素，但我对此完全不满意，并且我相信有更好的方法可以做到这一点。

export class PartialModal extends Component {
  this.state = {
    isFullScreen: false
  }

  render () {
    return (
      <React.Fragment>
        <TouchableWithoutFeedback onPress={() => this.props.dismiss()}>
          <Animatable.View transition='height' style={{ height: this.state.isFullScreen ? statusBarHeight : Metrics.screenHeight * 0.6 }} />
        </TouchableWithoutFeedback>
        <GestureRecognizer
          onSwipeUp={() => this.setState({ isFullScreen: true })}
          onSwipeDown={() => this.state.isFullScreen ? this.setState({ isFullScreen: false }) : this.props.dismiss()}>
          ...
        </GestureRecognizer>
      </React.Fragment>
    )
}

在此示例中，我无法通过拖动来扩展“模式”，它只能识别轻扫手势。

Answer 1

签出react-native-reanimated-bottom-sheet

您还可以签出react-navigation。并将其设置为modal。然后，您可以使用cardStyleInterpolator

对其进行调整

Answer 2

我了解到它叫做Bottom Sheet。因此，我进行了搜索，发现了一些存储库：

https://github.com/cesardeazevedo/react-native-bottom-sheet-behavior

https://github.com/prscX/react-native-bottom-action-sheet

我将进行更多调查，但这是一个很好的开始。