使用 pan responder 反应本机部分模态

Question

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

我不知道这个元素的真实名称，但可以在 Apple 地图、Google 地图或 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>
    )
}

在这个例子中，我无法通过拖动来展开"modal"，它只能识别滑动手势。

Answer 1

我知道它叫Bottom Sheet。所以我搜索了一下，发现了一些回购协议：

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

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

我会再调查一下，但这是一个很好的开始。

Answer 2

查看 react-native-reanimated-bottom-sheet

您也可以查看react-navigation. And set it to modal. Then you can tweak it with cardStyleInterpolator

使用 pan responder 反应本机部分模态

React native partial modals with pan responder

react-native

react-native-ios

react-native-navigation