VKUI-компоненты

VKUI — это библиотека адаптивных React-компонентов. С её помощью вы можете создавать привлекательный интерфейс мини-приложений для мобильных устройств.

NPM: https://www.npmjs.com/package/@vkontakte/vkui Документация: https://vkcom.github.io/VKUI Figma: https://www.figma.com/@vk

Если вы используете библиотеку для создания шаблона, отдельно подключать VKUI не нужно.

Обратите внимание! Вашему мини-приложению доступна почти вся площадь экрана, поэтому для корректной работы навигации:

  • Используйте компонент PanelHeader на каждом экране приложения. Он должен содержать название приложения и значок Назад на тех экранах, где тот требуется.
  • Не занимайте правый верхний угол PanelHeader — это место зарезервировано для нативного бара с кнопками Меню и Закрыть, который отображается всегда.
  • Используйте стилизованный под платформу значок Назад. Для этого применяйте компонент <PanelHeaderBack />.

На устройствах с Android нажатие кнопки Назад вызывает в WebView событие history.back. По нажатию этой кнопки официальное приложение сделает возврат на предыдущую страницу вашего приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации необходимо обрабатывать нажатие аппаратной клавиши в мини-приложении и реализовывать роутинг. Например при помощи библиотеки react-router.