isa1vatore / vk-mini-app-boilerplate Goto Github PK

В некоторых случаях в приложении необходимо перейти из панели на одной табе в панель на другой табе. Это можно сделать с помощью this.props.setStoty(“more”, “more”);. Однако, если мы открываем приложение и сразу переходим на панель в другой табе и хотим вернуться назад с помощью this.props.goBack(), то из-за этой проверки, на iOS это работать не будет.

Я попробовал отключить эту проверку на Android и не заметил каких-либо проблем с навигацией в приложении. Не думаю, что эта проверка нужна.

Опять по твоему желанию)

Вертикальный скролл сохраняет, но нет API для сохранения горизонтального скролла внутренних компонентов. А было бы удобно) Ну то есть onscroll мы реализует сами, а сохранение происходит в основном storage где-нибудь в componentScrolls[componentId].(x,y)

Как воспроизвести:

1. переходим по кнопки "список моих групп"
2. сразу же кликаем по системной кнопке назад (андройд)
3. нас вернуло на предыдущую панель (окошко с получением токена показаться не успело)
4. переходим по кнопки "список моих групп" и видим вечный спиннер

Девайс: Honor 8x

И еще, мне кажется, что можно улучшить обработку события GO_BACK, в случае, если в popout установлен . Так как при спиннере весь интерфейс приложения блокируется, кроме системной кнопки назад на андройде, надо либо блокировать и ее (опять делать window.history.pushState(null, null) если показан спиннер) или же скрывать спиннер и делать дополнительный переход назад, так как нелогично просто скрыть спиннер при клике назад.

P.S. Класная репа, если у нее будет будущие, это будет супер))

Я наверное уже задалбывать начинаю)

Есть элемент HeaderContext, хотелось бы видеть реализацию открытия его из апишки, а также поддержку закрытия с помощью аппаратных кнопок "назад"

Обратил внимание, что в роутере используется своеобразный хак window.history.pushState(null, null); возможно проще и чище использовать чуть другой хак:

// Чистим первоначальное состояние
window.history.replaceState({}, '', '#init');
// Добавляем вторую запись в историю
window.history.pushState({}, '', '#router');

window.addEventListener('popstate', (event) => {
  // После нажатия кнопки назад (#init), возвращаем историю на вторую запись
  window.history.pushState({}, '', '#router-back');
  goBack('Android');
});

Соответственно у нас всегда 2 записи в истории и мы спокойно обрабатываем нажатие кнопки назад не засоряя историю.

В этом подходе из самого роутера можно будет убрать все вызовы pushState.

Если проскроллить группы, а потом перейти на другой таб и вернуться обратно, скролл групп не сохранится (думаю, это как-то связано с недавнимим обновлениями скролла)

Как реализовать подтверждение перехода? Имею в виду Preventing navigation из router5.

Вариант использования: подтверждение алертом перехода назад (кнопка назад, Android back button или iOS swipe back) с формы с неcохранёнными данными.

https://youtu.be/8eaXiADdVvk

Этот реп - уже находка, но мне кажется тут не хватает примера как сохранить состояние форм при переключении через setStory. Панели сохраняет, скролл сохраняет и т.д, но вот формы не сохраняет) Чисто на свое усмотрение добавь, если хочешь

Проблема в том, что при переходе из одной панели одного view в панель другого view, activePanel меняется для обоих.

В примере из официальной документации такого эфекта не происходит т.к у каждой View всегда один и тот же activePanel

<Root activeView={this.state.activeView}>
        <View activePanel="panel1.1" id="view1">
          <Panel id="panel1.1">
            <PanelHeader>View 1</PanelHeader>
            <Group>
              <CellButton onClick={ () => this.setState({ activeView: 'view2' }) }>
                Open View 2
              </CellButton>
            </Group>
          </Panel>
        </View>
        <View header activePanel="panel2.1" id="view2">
          <Panel id="panel2.1">
            <PanelHeader>View 2</PanelHeader>
            <Group>
              <CellButton onClick={ () => this.setState({ activeView: 'view1' }) }>
                Back to View 1
              </CellButton>
            </Group>
          </Panel>
        </View>
      </Root>

Возможно придется создавать доп. хранилище активных панелей или что-нибудь ещё