用 pan 响应器反应原生部分模态答案

【问题标题】：React native partial modals with pan responder用 pan 响应器反应原生部分模态
【发布时间】：2019-03-27 07:54:34
【问题描述】：

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

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

在这个例子中，我不能通过拖动来扩展“模态”，它只是识别滑动手势。

【问题讨论】：

标签： react-native react-native-ios react-native-navigation

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

查看react-native-reanimated-bottom-sheet

您也可以查看react-navigation。并将其设置为modal。然后你可以用cardStyleInterpolator调整它

【讨论】：