VKUI Navigator

Данный модуль позволяет быстро и просто создать базовую логику навигации для сервиса на платформе VK Mini Apps. Поддерживает все необходимые функции и инкапсулирует в себе базовое поведение на всех платформах (такое как свайпы на iOS и кнопка "назад" на Android)

Демо приложение 📱

• Открыть ВКонтакте
• Исходный код

Установка 📦

Выполните yarn add vkui-navigator или npm i vkui-navigator

Быстрый старт 🚀

import { Stack, Page } from "vkui-navigator/dist";
 
// simple usage
<Stack activePage="page1">
    <Page id="page1" activePanel="welcome">
        <Welcome id="welcome"/>
    </Page>
</Stack>

Принцип работы

Вокруг ваших панелей создается View со втроенной базовой логикой. Каждой панели передается в props объект navigator. В нем содержаться методы и параметры, который вы передали из предыдущей панели. Также есть поддержка модальных окон и попапов

API Справочник

Stack

▸ Корневой элемент навигации

Props:

Название	Тип	Описание
activePage	string, required	Идентификатор активной страницы
modals	array of node	Массив модальных окон

---

Page

▸ Основная единица модуля. Включает в себя логику навигации между панелями

Props:

Название	Тип	Описание
id	string, required	Идентификатор, который передается View внутри компонента
activePanel	string	Идентификатор начальной панели
header	bool	Показать/скрыть header (эквивалент header во View)
title	string	Название пункта в таббаре (при его использовании)
icon	string	Иконка пункта в таббаре (при его использовании)

---

Tabbar

▸ Умный таббар

Props:

Название	Тип	Описание
id	string, required	Идентификатор, который передается Epic внутри компонента
activeStory	string, required	Идентификатор начальной страницы (Page)

---

Navigator

▸ Объект, передаваемый в props всем панелям и модальным окнам.

Structure:

Название	Тип	Описание
go(id:String, params={})	func	Переход на панель с идентификатором id
goPage(id:String, params={})	func	Переходит на другу страницу Page (из Stack)
goBack	func	Возвращает на одну панель назад
showModal(id:String, params={})	func	Показывает модальное окно с идентификатором id
hideModal	func	Скрывает все активные модальные окна
showPopout(popout:Node)	func	Показывает переданный попаут
hidePopout	func	Скрывает все активные попауты
showLoader	func	Показывает спиннер загрузки
hideLoader	func	Скрывает спиннер загрузки
params	object	Параметры, которые передаются через go или showModal

---

Примеры 📚

Пример с панелью

const Panel1 = ({ id, navigator }) => (
    <Panel id={id}>
        <PanelHeader>
            Панель 1
        </PanelHeader>
        <Group>
            <Button onClick={() => navigator.go("panel2")}>
                Вперед
            </Button>
        </Group>
    </Panel>
);

const Panel2 = ({ id, navigator }) => (
    <Panel id={id}>
        <PanelHeader>
            Панель 2
        </PanelHeader>
        <Group>
            <Button onClick={() => navigator.goBack()}>
                Назад
            </Button>
        </Group>
    </Panel>
);

<Stack activePage="page1">
    <Page id="page1" activePanel="panel1">
        <Panel1 id="panel1"/>
        <Panel2 id="panel2"/>
    </Page>
</Stack>

Авторы 🎨

• Степан Новожилов