Теперь давайте попробуем создать второй экран и связать эти 2 экрана между собой.
Добавим в этом же файле ниже нашего кода еще один вызов app.screen, но в первый аргумент поставим значение /catalog.
// Catalog screen
const catalogScreen = app.screen('/catalog', async function(ctx, req) {
return <screen title="Catalog">
<text class="section">Catalog items</text>
</screen>
})
Этот экран может быть открыт если мы теперь к адресу нашего файла добавим ~catalog.
Для этого добавим в первом экране вместо showToast действие перехода - navigate на экран каталога.
<button
onClick={catalogScreen.navigate()}
class={["primary","section"]}
title="Click me"/>
Метод app.screen привязывает обработчик запроса экрана к шаблону пути URL. Шаблон является частью URL-адреса при запросе к экрану. Тогда полный URL-адрес для доступа к экрану соответствует точке входа исполняемого кода: файлу, который выполнил app.screen.
Есть разница между файлом, где написан код, и откуда он был запущен.
В нашем примере пока один файл - это start.tsx,
и путь catalog внутри него запускается по адресу
https://домен-аккаунта/start~catalog.
Но мы можем вынести код в другой файл, оставив в исходном файле только регистрацию экрана.
В этом случае роутер по прежнему будет считать что он запущен в рамках файла исходного файла start.tsx и все адреса будут строиться исходя из этого.
Таким образом, метод .navigate обеспечивает переход на другой экран в текущем файле.
Добавим на второй экран ссылку, возвращающую нас обратно на первый.
<text onClick={mainScreen.navigate()} class="link">
Go to main screen
</text>
Таким образом, у нас получится файл который содержит 2 экрана и навигацию между ними.
Попробуйте создать этот файл в своем аккаунте. После этого отсканируйте QR-код в нижнем правом углу приложением Chatium и посмотрите как это работает в нативном приложении.
