Реагировать на нативные частичные модалы с пан-ответчиком - PullRequest
Новая
       32

Реагировать на нативные частичные модалы с пан-ответчиком

0 голосов
/ 23 октября 2018

Я пытаюсь воссоздать элемент, который появляется на экране и который можно развернуть, закрыть или изменить размер с помощью жеста прокрутки.

Я не знаю настоящего имени этого элемента, но он можетнапример, можно найти в Apple Maps, Google Maps или Apple Music.

Примеры частичных модалов:

enter image description here

Я пыталсясоздайте модальный экран с прозрачным фоном и прозрачным элементом, размер которого я изменяю, чтобы расширить элемент содержимого, но меня это совсем не устраивает, и я уверен, что есть лучший способ сделать это. 

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>
    )
}

В этом примере я не могу развернуть «модал», перетаскивая его, он просто распознает жест смахивания.

1 Ответ

0 голосов
/ 28 ноября 2018

Я узнал, что это называется Нижний лист .Так что я искал это и нашел несколько репозиториев:

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

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

Я буду исследовать немного больше, но это хороший способ начать.

...