rn navio
v0.1.0
Navio es una biblioteca de navegación para React Native construido sobre React Navigation. El objetivo principal es mejorar DX construyendo el diseño de la aplicación en un solo lugar y utilizando el poder de TypeScript para proporcionar autocompletación y otras características.
Navio le permite crear fácilmente diferentes tipos de aplicaciones: pestañas inferiores, pantalla única simple y aplicaciones con diseños de cajones. Se encarga de toda la configuración del código de Boilerplate para navegadores, pantallas, pilas, pestañas y cajones debajo del capó, para que pueda concentrarse en desarrollar la lógica comercial de su aplicación.
Si
Naviote ayudó de alguna manera, apoyarlo con ️
☣️ Navio sigue siendo una biblioteca joven y puede tener cambios rotos en el futuro. Consulte si Navio está listo para la producción
hilo agregar rn-navio
Como Navio está construido sobre React Navigation, deberá instalarse las siguientes bibliotecas:
Yarn Agregar @react-navegación/stack @react-navegación/nativo @react-navegación/stack nativo @react-navegación/tabellas inferior @react-navegación/cajón
Para obtener más información, consulte los pasos de instalación.
Este código creará una aplicación simple con una pantalla.
// app.tsximport {text} de 'react-native'; import {navio} de 'rn-avio'; const home = () => {
Return <Ext> Página de inicio </text>;}; const navio = navio.build ({
pantallas: {inicio},
pilas: {homestack: ['home'],
},
root: 'stacks.homestack',}); exportar default () => <navio.app />; // app.tsximport {text} de 'react-native'; import {navio} de 'rn-avio'; const home = () => {
Return <Ext> Página de inicio </text>;}; const settings = () => {
Return <Ext> Página de configuración </text>;}; const navio = navio.build ({
pantallas: {inicio, configuración},
pilas: {homestack: ['home'], settingsstack: ['configuración'],
},
Tabs: {appTabs: {Layout: {Hometab: {Stack: 'Homestack'}, settingStab: {stack: 'settingsstack'},},},
},
root: 'tabs.apptabs',}); exportar default () => <navio.app />;Si desea ver un ejemplo más complejo y exótico, siga este enlace.
Puede arrancar un nuevo proyecto con Navio de Expo-Starter:
NPX CLI-RN Nueva aplicación
Juega con la biblioteca en la bocadillo de exposición.
Navio proporciona un colecito de acciones para realizar navegación dentro de la aplicación. Supongamos que tiene un objeto navio :
.N
Objeto de navegación actual de React Navigation. Puedes realizar cualquiera de estas acciones.
.push(name, params?)
Agrega una ruta encima de la pila y navega hacia ella.
.goBack()
Permite volver a la ruta anterior de la historia.
.setParams(name, params)
Permite actualizar los parámetros para una determinada ruta.
.setRoot(as, rootName)
Establece una nueva raíz de aplicación. Se puede usar para cambiar entre Stacks , Tabs y Drawers .
Acciones relacionadas con las pilas.
.stacks.push(name)
Agrega una ruta encima de la pila y navega hacia ella. Puede ocultar la barra de pestaña.
.stacks.pop(count?)
Te lleva de vuelta a una pantalla anterior en la pila.
.stacks.popToTop()
Te lleva de regreso a la primera pantalla en la pila, despediendo a todos los demás.
.stacks.setRoot(name)
Establece una nueva raíz de aplicación de las pilas.
Acciones relacionadas con las pestañas.
.tabs.jumpTo(name)
Se usa para saltar a una ruta existente en el navegador de pestañas.
.tabs.updateOptions(name, options)
Opciones de actualización para una pestaña determinada. Solía cambiar el recuento de insignias.
.tabs.setRoot(name)
Establece una nueva raíz de aplicación de las pestañas.
Acciones relacionadas con los cajones.
.drawers.open()
Se usa para abrir el panel de cajón.
.drawers.close()
Se usa para cerrar el panel de cajón.
.drawers.toggle()
Se usa para abrir el panel de cajón si está cerrado, o cierre si está abierto.
.drawers.jumpTo(name)
Solía saltar a una ruta existente en el navegador de cajones.
.drawers.updateOptions(name, options)
Opciones de actualización para un contenido de menú de cajón dado. Se usa para cambiar su título.
.drawers.setRoot(name)
Establece una nueva raíz de aplicación de los cajones.
Acciones relacionadas con los modales.
.modals.show(name, params)
Se utiliza para mostrar un modal y pase de parámetros existentes.
.modals.getParams(name)
Devuelve los parámetros aprobados para modal en el método .show ().
Ganchos útiles.
.useN()
Duplicado del gancho useNavigation() de React Navigation. Se utiliza para conveniencia dentro de las pantallas para obtener acceso al objeto de navegación. Docs.
.useR()
Duplicado de useRoute() gancho de React Navigation. Se usa para conveniencia dentro de las pantallas para obtener acceso al objeto de ruta. Documento
.useParams()
Se utiliza para un acceso rápido a los parámetros de la ruta de navegación. Se usa para conveniencia dentro de las pantallas al pasar los parámetros.
Navio requiere screens y al menos una stacks para crear un diseño de aplicación. tabs , drawers , modals , root , hooks y defaultOptions son opcionales y se usan para diseños de aplicaciones más avanzados.
Estos son ladrillos principales de su aplicación con Navio. Puede reutilizarlos para cualquier pila que desee construir.
Una pantalla se puede definir pasando un componente de reacción simple. Si desea pasar algunas opciones que describan la pantalla, entonces también puede pasar un objeto.
import {Screen1, Screen3} de '@app/screens'; const navio = navio.build ({
pantallas: {One: screen1, two: () => {return <> </>;} tres: {componente: screen3, options: (props) => ({title: 'tresone'})}
},}); Las pilas se construyen utilizando Screens que se han definido antes. IDES debería ayudar con el autocompleto para una mejor DX.
Se puede definir una pila pasando una matriz de Screens . Si desea pasar algunas opciones a Stack Navigator, puede pasar un objeto.
const navio = Navio.Build ({
// Las pantallas se toman del paso anterior
pilas: {mainstack: ['one', 'two'], exhibplestack: {screens: ['tres'], navigatorProps: {scseateListeners: {focus: () => {},},},},
},}); Las pestañas se construyen con Screens , Stacks y Drawers que se han definido antes.
Las pestañas se pueden definir pasando un objeto con content y, opcionalmente, accesorios para Navigator.
El contenido puede tomar como valor uno de Stacks , Drawers , variedad de Screens o un objeto que describe la pila y las opciones para la pestaña inferior (que describe el título, el icono, etc.).
const navio = Navio.Build ({
// Las pantallas y las pilas se toman del paso anterior
Tabs: {appTabs: {Layout: {mantenab: {stack: ['one', 'dos'], // o cajón: 'somedrawer', opciones: () => ({title: 'main',}),, }, Ejempletab: {pila: 'Ejemplestack', // o cajón: 'somedrawer', opciones: () => ({título: 'Ejemplo', }),},}, Opciones: {...}, // NavigatorProps opcional: {...}, // Opcional},
},}); Los cajones se construyen con Screens , Stacks y Tabs que se han definido antes.
Los cajones se pueden definir pasando un objeto con content y, opcionalmente, accesorios para Navigator.
El contenido puede tomar como valor uno de Stacks , Tabs , variedad de Screens o un objeto que describe la pila y las opciones para la pestaña inferior (que describe el título, el icono, etc.).
const navio = Navio.Build ({
// Las pantallas y las pilas se toman del paso anterior
cajones: {mainDrawer: {Layout: {main: 'mainstack', ejemplo: 'exhibplestack', playground: ['one', 'dos', 'tres'],}, opciones: {...}, // opcional NavigatorProps: {...}, // opcional},
},}); Los modales se construyen con Screens y Stacks que se han definido antes. Puede mostrarlos/presentarlos en cualquier momento mientras usa la aplicación.
Se puede definir un modal pasando una matriz de Screens o un nombre de Stacks .
const navio = Navio.Build ({
// Las pantallas y las pilas se toman del paso anterior
modals: {exhibplemodal: {stack: 'exhibplestack', opciones: {...}, // opcional},
},}); Este es un nombre raíz de la aplicación. Puede ser una de Stacks , Tabs o Drawers .
Puede cambiar la raíz de la aplicación más tarde por navio.setRoot('drawers', 'AppDrawer') o cambiando initialRouteName de los componentes <navio.App /> .
const navio = Navio.Build ({
// Las pestañas, pestañas y cajones se toman de ejemplos anteriores
root: 'tabs.apptabs', // o 'stacks.mainstack' o 'cajones.appdrawer'}); Lista de ganchos que se ejecutarán en cada navegador Stacks , Tabs o Drawers generados. Útil para el modo oscuro o el cambio de idioma.
const navio = Navio.Build ({
ganchos: [usetranslar],}); Opciones predeterminadas que se aplicarán según las pantallas y contenedores Drawer cada Stacks Tabs Modal pestañas generados en la aplicación.
Note todas las opciones de contenedores y Tabs y las pantallas del Drawer tienen headerShown: false de forma predeterminada (para ocultar los encabezados de navegación innecesarios). Siempre puede cambiarlos, lo que podría ser útil si desea tener un botón nativo < Back al ocultar las pestañas (presionando la nueva Stack ).
const navio = Navio.Build ({
DefaultOptions: {Stacks: {Screen: {HeadershadowVisible: False, HeadertIntcolor: Colors.Primary,}, Container: {HeadersHown: True,},}, Tabs: {Screen: TabdefaultOptions,}, Canter: {ScreenDefeFaultOptions,},},},},},},},},},},},},},},,
},}); Navio genera componente raíz para la aplicación después de que se define el diseño. Se puede usar para pasarlo directamente para registerRootComponent() o para envolver con proveedores adicionales o agregar más lógica antes del inicio de la aplicación.
const navio = Navio.Build ({...}); exportación predeterminada () => <navio.app /> Puede cambiar la raíz de la aplicación por navio.setRoot('drawers', 'AppDrawer') o cambiando initialRouteName de <navio.App /> componente.
Esta es una pregunta más frecuente (aquí, aquí y aquí). A continuación puede encontrar dos soluciones:
// use .navate Método del objeto de navegación de reacción y pase paramsnavio.n.navigate ('mymodal', {screen: 'screenName', params: {userId: 'someId'}}); // Access Params en una pantalla screenconst = () => {
const {userId} = navio.useParams ();};v0.1.+ // use .modals.show método de navio y pasar paramsnavio.modals.show ('mymodal', {userId: 'someId'}); // Access Params en una pantalla screenconst = () => {
const {userId} = navio.modals.getParams ('mymodal');};EXPO Router es una biblioteca de enrutamiento diseñada para aplicaciones nativas de Universal React utilizando Expo. Funciona en un sistema de enrutamiento basado en archivos, por lo que es una excelente opción para los desarrolladores que buscan crear aplicaciones para plataformas nativas (iOS y Android) y web utilizando una única base de código.
Navio, por otro lado, adopta un enfoque de configuración estática, similar al método de construcción de diseño visto en React Native Navigation. Navio se dirige principalmente a las plataformas nativas (iOS y Android), con menos énfasis en la optimización de la compatibilidad web. En Navio, el diseño de la aplicación está configurado dentro de un solo archivo.
Ambas bibliotecas se construyen sobre la navegación React y se pueden usar junto con ella. Esto significa que se espera que todos los ganchos, acciones, capacidades de enlace profundas y otras características de React Navigation funcionen sin problemas con ambos. En particular, React Navigation introduce la configuración estática en V7 (que aún no se ha lanzado).
Navio ha sido esencial para Buddy Marketplace (aplicación iOS), ayudándonos a lanzarlo en solo 2-3 meses. Su uso en la aplicación, que está ganando a los usuarios diariamente y necesita nuevas funciones rápidamente, nos permite centrarnos más en crear una lógica comercial valiosa en lugar de tratar con tareas de configuración básicas.
Sin embargo, Navio sigue siendo una biblioteca joven y carece de algunas características, como la integración de vinculación profunda sin problemas, que son importantes para su máxima efectividad en las aplicaciones de producción. Como es parte de una aplicación en vivo, planeo actualizarla regularmente, agregando nuevas funcionalidades. Puedes ver lo que viene revisando la sección de planes futuros.
Si está usando Navio en su aplicación, me encantaría saber de usted, y si hay características adicionales que está buscando.
Navio comenzó como un proyecto experimental (y un poco extraño) destinado a minimizar el código repetitivo en el diseño de la aplicación utilizando la navegación React. Me gusta el concepto de configuración estática, donde toda la configuración de diseño de la aplicación se condensa en un solo archivo. Después de implementarlo dentro del comienzo de la exposición y recibir comentarios positivos, decidí integrarlo en la aplicación móvil activa. Hay características adicionales que me gustaría integrar en Navio. Uno de los objetivos más emocionantes es fusionar la navegación de reaccionamiento y reaccionar las funcionalidades de navegación nativa en una API unificada, agilizando aún más el proceso de desarrollo.
Todavía hay algunas cosas que me gustaría agregar a la biblioteca:
.updateOptions() para pestaña y cajón específicos.
Las pestañas se pueden colocar dentro del cajón y viceversa.
Pase los accesorios a los modales.
Facilite la luz profunda proporcionando linking accesorios para las pantallas. Asunto.
Haga Navio Universal agregando RNN y RNN-Screens.
Extiende la función de la funcionalidad de Navio y el diseño de la aplicación.
Fácil integración de Navio con React Navigation (por ejemplo, navio.stack ())
Problemas de TypeScript @ index.tsx archivo.
Siéntase libre de abrir un problema para cualquier sugerencia.
Este proyecto tiene licencia MIT
