Как перекрыть меню фотографией при отсутствии активности со стоны юзера?

Question

[pcdesign]

Есть приложение сделанное на основе:
https://snack.expo.io/@satya164/github.com-callsta...

Приложение показывает фото.
Как сделать так, чтобы когда юзер ничего не делает с телефоном, фото перекрывало меню сверху и снизу как на скриншоте ниже:



А при активности со стороны юзера опять возвращалось в исходное состояние.

Comments

[m_frost]

ну можно опциональним рендерингом, в стейт пишеш свойство isMenuShown i если да то рендериш меню а нет то фото занимает все пространство. На странице запускаеш таймер которий обновляеш по onPress и скролл, если таймер доходит до нуля то isMenuShown = false. Както так на вскидку).
Сори за руский лень роскладку менять)

Answer 1

[Роман Александрович]

ну есть такой вариант - сверху и снизу фотографии добавляете необходимые вам кнопки и надписи. Как только показали фотографию с контентом запускаете таймер после которого вы спрячьте контент. По тапу по фотографии таймер сбрасываете и показываете ваше меню. И обязательно добавьте анимацию для показа и прятания https://facebook.github.io/react-native/docs/anima...

Comments

[pcdesign]

Спасибо за ответ.
Я сделал это через PanResponder (не знаю на сколько это правильно)
https://snack.expo.io/@aimodding/warn-about-inactivity

И не знаю, на сколько правильно прятать и показывать меню с сендвичем таким макаром:

_setIsActive = () => {
    this._lastInteraction = new Date();
    this.props.navigation.setParams({
      showAppBar: 'flex',
    });

  _setIsInactive = () => {
    this.setState({ timeWentInactive: new Date() });
    this.props.navigation.setParams({
      showAppBar: 'none',
    });

И в AppBar

return (
      <View style={{ display: this.props.params.showAppBar }}>
        <Appbar.Header>

[Роман Александрович]

pcdesign, да работает как надо. Осталось только в кучу все собрать.