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

Я не знаю настоящего названия этого элемента, но его можно найти, например, в 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>
    )
}

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

2
piRstone 23 Окт 2018 в 09:56

2 ответа

Лучший ответ

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

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

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

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

2
piRstone 28 Ноя 2018 в 12:12

Ознакомьтесь с react-native-reanimated-bottom-sheet

Вы также можете проверить реакцию-навигацию. И установите его на modal. Затем вы можете настроить его с помощью cardStyleInterpolator.

1
Adriaan Scholvinck 17 Апр 2020 в 20:56
52942915