rn navio
v0.1.0
Navio - это навигационная библиотека для NATING Native, построенная на вершине React Navigation. Основная цель состоит в том, чтобы улучшить DX путем создания макета приложения в одном месте и используя мощность TypeScript для обеспечения автоматического заполнения и других функций.
Navio позволяет легко создавать различные виды приложений: на основе вкладок на основе вкладок, простого экрана и приложений с макетами ящиков. Он позаботится обо всех конфигурации кода Cowerplate для навигаторов, экранов, стеков, вкладок и ящиков под капотом, так что вы можете сосредоточиться на разработке бизнес -логики вашего приложения.
Если
Navioпомог вам в некотором роде, поддержите его ️
☣ Navio все еще молодая библиотека и может иметь нарушающие изменения в будущем. Проверьте, готово ли Navio готово
пряжа добавить rn-navio
Поскольку Navio строится на вершине навигации React, вам нужно будет установить следующие библиотеки:
пряжа добавить @React-Navigation/Stack @React-Navigation/Native @React-Navigation/Native-Stack @React-Navigation/Bottom-Tabs @React-Navigation/ящик
Для получения дополнительной информации, пожалуйста, проверьте шаги установки.
Этот код создаст простое приложение с одним экраном.
// app.tsmostport {text} от 'React-cantive'; import {navio} из 'rn-navio'; const home = () => {
return <text> домашняя страница </text>;}; const vavio = vavio.build ({
экраны: {Home},
стеки: {HomeStack: ['Home'],
},
root: 'stacks.homestack',}); export default () => <navio.app />; // app.tsmostport {text} от 'React-cantive'; import {navio} из 'rn-navio'; const home = () => {
return <text> домашняя страница </text>;}; const suture = () => {
return <text> Настройки страницы </text>;}; const vavio = vavio.build ({
экраны: {Home, настройки},
Стеки: {HomeStack: ['Home'], настройки: ['settings'],
},
Вкладки: {apptabs: {mayout: {hometab: {stach: 'homestack'}, settingStab: {Stack: 'stensStack'},},},
},
root: 'tabs.apptabs',}); export default () => <navio.app />;Если вы хотите увидеть более сложный и экзотический пример, перейдите по этой ссылке.
Вы можете начать новый проект с Navio от Expo Starter:
npx cli-rn новое приложение
Играйте с библиотекой в выставке закуски.
Navio предоставляет коллекцию действий по выполнению навигации в приложении. Предположим, у вас есть объект navio :
.N
Текущий навигационный объект из React Navigation. Вы можете выполнить любое из этих действий.
.push(name, params?)
Добавляет маршрут в верхней части стека и перемещается вперед к нему.
.goBack()
Позволяет вернуться к предыдущему маршруту в истории.
.setParams(name, params)
Позволяет обновлять параметры для определенного маршрута.
.setRoot(as, rootName)
Устанавливает новое приложение root. Его можно использовать для переключения между Stacks , Tabs и Drawers .
Стеки, связанные с действиями.
.stacks.push(name)
Добавляет маршрут в верхней части стека и перемещается вперед к нему. Он может скрыть панель вкладок.
.stacks.pop(count?)
Возвращает вас к предыдущему экрану в стеке.
.stacks.popToTop()
Возвращает вас к первому экрану в стеке, уволив всех остальных.
.stacks.setRoot(name)
Устанавливает новое приложение root из стеков.
Действия, связанные с табсами.
.tabs.jumpTo(name)
Используется для прыжка на существующий маршрут в навигаторе вкладок.
.tabs.updateOptions(name, options)
Параметры обновлений для данной вкладки. Используется для изменения количества значков.
.tabs.setRoot(name)
Устанавливает новое приложение root с вкладок.
Действия, связанные с ящиками.
.drawers.open()
Используется для открытия панели ящика.
.drawers.close()
Используется для закрытия панели ящика.
.drawers.toggle()
Используется для открытия панели ящика, если закрыто или закрыть, если открыт.
.drawers.jumpTo(name)
Используется для прыжка на существующий маршрут в навигаторе ящика.
.drawers.updateOptions(name, options)
Параметры обновлений для данного контента меню ящика. Используется для изменения своего заголовка.
.drawers.setRoot(name)
Устанавливает новое приложение из ящиков.
Связанные с модалами действия.
.modals.show(name, params)
Используется для показа существующих модальных и проходных параметров.
.modals.getParams(name)
Возвращает параметры, передаваемые для метода modal on .show ().
Полезные крючки.
.useN()
Дубликация useNavigation() крюка от React Navigation. Используется для удобства внутри экранов, чтобы получить доступ к навигационному объекту. Док.
.useR()
Дубликат useRoute() крючок от React Navigation. Используется для удобства внутри экранов, чтобы получить доступ к объекту маршрута. Док
.useParams()
Используется для быстрого доступа к параметрам навигации. Используется для удобства внутри экранов при прохождении параметров.
Navio требует screens и, по крайней мере, одного stacks для создания макета приложения. tabs , drawers , modals , root , hooks и defaultOptions не являются обязательными и используются для более продвинутых макетов приложений.
Это основные кирпичи вашего приложения с Navio. Вы можете повторно использовать их для любого стека, который вы хотите построить.
Экран может быть определен путем прохождения простого компонента реагирования. Если вы хотите передать некоторые параметры, которые описывают экран, то вы также можете передать объект.
Import {screen1, screen3} от '@app/screens'; const navio = navio.build ({{{{
Экраны: {One: Screen1, Two: () => {return <> </>;} три: {Component: Screen3, Options: (props) => ({title: 'ThreeOne'})}
},}); Стеки создаются с использованием Screens , которые были определены ранее. IDE должны помочь с автозаполнением для лучшего DX.
Стек может быть определен, передавая массив Screens . Если вы хотите передать некоторые параметры вниз к навигатору стека, вы можете передать объект.
const navio = vavio.build ({
// экраны взяты с предыдущего шага
Stacks: {mainStack: ['One', 'Two'], exampleStack: {Screens: ['Three'], NavigatorProps: {ScreenListeners: {Focus: () => {},},},},
},}); Вкладки создаются с использованием Screens , Stacks и Drawers , которые были определены ранее.
Вкладки могут быть определены путем передачи объекта с content и, необязательно, реквизита для Navigator.
Содержание может воспринимать в качестве значения один из Stacks , Drawers , массива Screens или объекта, который описывает стек и параметры для вкладки внизу (описывает заголовок, значок и т. Д.).
const navio = vavio.build ({
// экраны и стеки взяты с предыдущего шага
Вкладки: {apptabs: {mayout: {maintab: {stack: ['One', 'Two'], // или ящик: 'nomedrawer', options: () => ({title: 'main',}), }, ExampleTab: {stack: 'exampleStack', // или ящик: 'nomedrawer', options: () => ({title: 'Пример', }),},}, параметры: {...}, // Необязательные NavigatorProps: {...}, // Необязательно},
},}); Ящики создаются с использованием Screens , Stacks и Tabs , которые были определены ранее.
Ящики могут быть определены путем передачи объекта с content и, необязательно, реквизита для Navigator.
Содержание может воспринимать в качестве значения один из Stacks , Tabs , массива Screens или объекта, который описывает стек и параметры для вкладки внизу (описывает заголовок, значок и т. Д.).
const navio = vavio.build ({
// экраны и стеки взяты с предыдущего шага
Ящики: {maindrawer: {mayout: {main: 'mainstack', example: 'exampletack', Playground: ['One', 'Two', 'three'],}, опции: {...}, // Необязательно NavigatorProps: {...}, // Необязательно},
},}); Модалы создаются с использованием Screens и Stacks , которые были определены ранее. Вы можете показать/представить их в любой момент времени при использовании приложения.
Модал может быть определен путем прохождения массива Screens или имени Stacks .
const navio = vavio.build ({
// экраны и стеки взяты с предыдущего шага
Модалы: {exampleModal: {Stack: 'exampleStack', Options: {...}, // Необязательно},
},}); Это корневое имя приложения. Это может быть один из Stacks , Tabs или Drawers .
Вы можете изменить корень приложения позже на navio.setRoot('drawers', 'AppDrawer') или путем изменения initialRouteName компонента <navio.App /> .
const navio = vavio.build ({
// Стеки, вкладки и ящики взяты из предыдущих примеров
root: 'tabs.apptabs', // или 'stacks.mainstack' или 'rabers.appdrawer'}); Список крючков, которые будут запускать на каждом сгенерированном Stacks , Tabs или навигаторах Drawers . Полезно для темного режима или изменения языка.
const navio = vavio.build ({
крючки: [usetranslation],}); Параметры по умолчанию, которые будут применяться в соответствии с каждыми Stacks , Tabs , Drawer и Modal экранами и контейнерами, созданными в приложении.
Note все контейнеры и Tabs и Drawer . Параметры экранов есть headerShown: false по умолчанию (для того, чтобы скрыть ненужные заголовки навигации). Вы всегда можете изменить их, что может быть полезно, если вы хотите иметь нативную кнопку < Back при скрытии вкладок (нажимать новый Stack ).
const navio = vavio.build ({
DefaultOptions: {Stacks: {Screen: {headerShadowvisible: false, headertintcolor: colors.primary,}, контейнер: {headershown: true,},}, вкладки: {экран: tabdefaultoptions,}, Craver: {Screen: Dersefaultoptions,},
},}); Навио генерирует корневую компонент для приложения после определения макета. Его можно использовать для непосредственного передачи его в registerRootComponent() или для обертывания с дополнительными поставщиками или добавить больше логики перед запуском приложения.
const navio = navio.build ({...}); export defall () => <navio.app /> Вы можете изменить корень приложения на navio.setRoot('drawers', 'AppDrawer') или путем изменения initialRouteName <navio.App /> компонента.
Это чаще всего задается вопрос (здесь, здесь и здесь). Ниже вы можете найти два решения:
// Использование .navigate Метод навигационного объекта React и пропуска paramsnavio.n.navigate ('mymodal', {screen: 'screenname', params: {userid: 'aseid'}}); // Доступ к параметрам на экране Screenconst = = () => {
const {userId} = vavio.useparams ();};v0.1.+ // Использование .modals.show Метод Navio и Pass Paramsnavio.modals.show ('MyModal', {userId: 'aseid'}); // Доступ к параметрам на экране ScreenConst = () => {
const {userid} = vauio.modals.getparams ('mymodal');};Expo Router - это библиотека маршрутизации, предназначенная для универсальных нативных приложений React с использованием EXPO. Он работает в системе маршрутизации на основе файлов, что делает ее отличным выбором для разработчиков, которые хотят создавать приложения для собственных (iOS и Android), так и для веб-платформ, использующих одну кодовую базу.
Navio, с другой стороны, принимает статический подход конфигурации, аналогичный методу построения макета, наблюдаемого в Native Navigation React. Navio в основном нацелен на собственные платформы (iOS и Android), с меньшим акцентом на оптимизацию совместимости Интернета. В Navio макет приложения настроен в одном файле.
Обе библиотеки построены на вершине навигации React и могут использоваться в сочетании с ней. Это означает, что все крючки, действия, возможности глубокого связывания и другие функции от React Navigation, как ожидается, будут работать с обоими. Примечательно, что React Navigation вводит статическую конфигурацию в V7 (которая еще не была выпущена).
Navio был необходим для Buddy Marketplace (приложение для iOS), помогая нам запустить его всего за 2-3 месяца. Его использование в приложении, которое ежедневно получает пользователей и быстро нуждается в новых функциях, позволяет нам больше сосредоточиться на создании ценной бизнес -логики вместо того, чтобы справляться с основными задачами настройки.
Тем не менее, Navio по -прежнему является молодой библиотекой, и ей не хватает некоторых функций, таких как бесшовная глубокая интеграция, которые важны для его полной эффективности в производственных приложениях. Поскольку он является частью живого приложения, я планирую регулярно обновлять его, добавляя новые функции. Вы можете увидеть, что происходит, проверив раздел планов на будущее.
Если вы используете Navio в своем приложении, я бы хотел услышать от вас, и если есть дополнительные функции, которые вы ищете.
Navio начался как экспериментальный (и немного странный) проект, направленный на минимизацию повторяющегося кода в макете приложения с использованием React Navigation. Мне нравится концепция статической конфигурации, где вся настройка макета приложений конденсирована в один файл. После реализации его в рамках Экспо-старта и получения положительных отзывов я решил интегрировать его в активное мобильное приложение. Есть дополнительные функции, которые я хотел бы интегрировать в Navio. Одной из наиболее интересных целей является объединение навигации React и реагировать нативные функции навигации в унифицированный API, еще больше оптимизируя процесс разработки.
Есть еще некоторые вещи, которые я хотел бы добавить в библиотеку:
.updateOptions() для конкретной вкладки и ящика.
Вкладки могут быть размещены внутри ящика и наоборот.
Пройти реквизит в модалы.
Облегчить глубокое уточнение, предоставляя linking опору с экранами. Проблема.
Сделайте Navio Universal, добавив RNN и RNN-экраны.
Расширить фантазию Navio и макет приложений.
Легкая интеграция Navio с навигацией React (например, Navio.Stack ())
Проблемы TypeScript @ index.tsx файл.
Не стесняйтесь открывать проблему для любых предложений.
Этот проект лицензирован MIT
