rn navio
v0.1.0
Navio est une bibliothèque de navigation pour React Native construite au-dessus de la navigation React. L'objectif principal est d'améliorer DX en construisant la disposition de l'application en un seul endroit et en utilisant la puissance de TypeScript pour fournir une assortiment automatique et d'autres fonctionnalités.
Navio vous permet de créer facilement différents types d'applications: les onglets inférieurs, simples à écran unique et les applications avec des dispositions de tiroir. Il s'occupe de toutes les configurations de code de passe-partout pour les navigateurs, les écrans, les piles, les onglets et les tiroirs sous le capot, afin que vous puissiez vous concentrer sur le développement de la logique métier de votre application.
Si
Naviovous a aidé d'une certaine manière, soutenez-le avec ️
☣️ Navio est encore une jeune bibliothèque et pourrait avoir des changements de rupture à l'avenir. Découvrez si Navio est prêt pour la production
fil Ajouter RN-navio
Comme Navio est construit au-dessus de la navigation React, vous devrez installer les bibliothèques suivantes:
yarn add @ react-navigation / stack @ react-navigation / natif @ react ne-navigation / natif-stack @ react-navigation / inférieur @ react-navigation / tiroir
Pour plus d'informations, veuillez vérifier les étapes d'installation.
Ce code créera une application simple avec un seul écran.
// app.tsxixport {text} de 'react-native'; import {Navio} de 'rn-navio'; const home = () => {{
return <Text> Page d'accueil </Text>;}; constario = Navio.build ({
écrans: {home},
Stacks: {homestack: ['home'],
},
root: 'stacks.homestack',}); export default () => <Navio.app />; // app.tsxixport {text} de 'react-native'; import {Navio} de 'rn-navio'; const home = () => {{
return <Text> Page d'accueil </Text>;}; const Paramètres = () => {
return <Text> Page Paramètres </Text>;}; constario = Navio.build ({
écrans: {home, paramètres},
Stacks: {homestack: ['home'], SettingsStack: ['Settings'],
},
Tabs: {apptabs: {Layout: {hometab: {stack: 'homestack'}, settingstab: {stack: 'sefitSstack'},},},
},
root: 'tabs.apptabs',}); exporter default () => <navio.app />;Si vous souhaitez voir un exemple plus complexe et exotique, veuillez suivre ce lien.
Vous pouvez bootstrap un nouveau projet avec Navio depuis Expo-Starter:
NPX CLI-RN Nouvelle application
Jouez avec la bibliothèque dans la collation Expo.
Navio fournit une collection d'actions pour effectuer la navigation dans l'application. Supposons que vous ayez un objet navio :
.N
Objet de navigation actuel de la navigation React. Vous pouvez effectuer l'une de ces actions.
.push(name, params?)
Ajoute un itinéraire au-dessus de la pile et navigue vers l'avant.
.goBack()
Permet de revenir à la route précédente de l'histoire.
.setParams(name, params)
Permet de mettre à jour les paramètres pour un certain itinéraire.
.setRoot(as, rootName)
Définit une nouvelle racine d'application. Il peut être utilisé pour basculer entre Stacks , Tabs et Drawers .
Actions liées aux piles.
.stacks.push(name)
Ajoute un itinéraire au-dessus de la pile et navigue vers l'avant. Il peut masquer la barre d'onglet.
.stacks.pop(count?)
Vous ramène à un écran précédent dans la pile.
.stacks.popToTop()
Vous ramène au premier écran de la pile, rejetant tous les autres.
.stacks.setRoot(name)
Définit une nouvelle racine d'application à partir de piles.
Actions liées aux onglets.
.tabs.jumpTo(name)
Utilisé pour passer à un itinéraire existant dans le navigateur Tab.
.tabs.updateOptions(name, options)
Mise à jour les options pour un onglet donné. Utilisé pour changer le nombre de badges.
.tabs.setRoot(name)
Définit une nouvelle racine d'application à partir des onglets.
Actions liées aux tiroirs.
.drawers.open()
Utilisé pour ouvrir le volet du tiroir.
.drawers.close()
Utilisé pour fermer le volet du tiroir.
.drawers.toggle()
Utilisé pour ouvrir le volet du tiroir s'il est fermé ou fermer s'il est ouvert.
.drawers.jumpTo(name)
Utilisé pour passer à un itinéraire existant dans le navigateur de tiroir.
.drawers.updateOptions(name, options)
Mise à jour des options pour un contenu de menu de tiroir donné. Utilisé pour changer son titre.
.drawers.setRoot(name)
Définit une nouvelle racine d'application à partir de tiroirs.
Actions liées aux modales.
.modals.show(name, params)
Utilisé pour montrer un modal et passer des paramètres existants.
.modals.getParams(name)
Renvoie les paramètres passés pour modal sur la méthode .show ().
Crochets utiles.
.useN()
Duplicate of useNavigation() Hook de la navigation React. Utilisé pour la commodité à l'intérieur des écrans pour accéder à l'objet de navigation. Docs.
.useR()
Duplicate of useRoute() Hook de React Navigation. Utilisé à la commodité à l'intérieur des écrans pour accéder à l'objet d'outier. Docs
.useParams()
Utilisé pour un accès rapide aux paramètres de l'itinéraire de navigation. Utilisé à la commodité à l'intérieur des écrans lors de la réussite des paramètres.
Navio nécessite screens et au moins une stacks pour créer une disposition d'application. tabs , drawers , modals , root , hooks et defaultOptions sont facultatifs et utilisés pour les dispositions d'applications plus avancées.
Ce sont les principales briques de votre application avec Navio. Vous pouvez les réutiliser pour toute pile que vous souhaitez construire.
Un écran peut être défini en passant un composant réactif ordinaire. Si vous souhaitez transmettre certaines options qui décrivent l'écran, vous pouvez également passer un objet.
Importer {Screen1, Screen3} à partir de '@ app / écrans'; constario = NAVIO.BUILD ({
Screens: {One: Screen1, Two: () => {return <> </>;} trois: {Component: Screen3, Options: (accessoires) => ({Title: 'ThreeOne'})}
},}); Les piles sont construites à l'aide Screens qui ont été définis auparavant. Les IDE devraient aider à la complétion automatique pour un meilleur DX.
Une pile peut être définie en passant un tableau d' Screens . Si vous souhaitez transmettre certaines options pour empiler Navigator, vous pouvez passer un objet.
constario = navio.build ({
// Les écrans sont prélevés à partir de l'étape précédente
Stacks: {MainStack: ['One', 'Two'], ExampleStack: {Screens: ['Three'], NavigatorProps: {ScreenListeners: {focus: () => {},},},},
},}); Les onglets sont construits à l'aide Screens , Stacks et Drawers qui ont déjà été définis.
Les onglets peuvent être définis en passant un objet avec content et, éventuellement, des accessoires pour Navigator.
Le contenu peut prendre en valeur, une valeur de Stacks , Drawers , un tableau d' Screens ou un objet qui décrit la pile et les options pour l'onglet inférieur (décrivant le titre, l'icône, etc.).
constario = navio.build ({
// Les écrans et les piles sont prélevés à partir de l'étape précédente
Tabs: {apptabs: {Layout: {maintab: {stack: ['one', 'deux'], // ou tiroir: 'SomeDrawer', Options: () => ({Title: 'Main',}), }, Exampletab: {pile: 'examplestack', // ou tiroir: 'SomeDrawer', Options: () => ({title: 'Exemple', }),},}, options: {...}, // NavigatorProps facultatif: {...}, // facultatif},
},}); Les tiroirs sont construits à l'aide Screens , Stacks et Tabs qui ont déjà été définis.
Les tiroirs peuvent être définis en passant un objet avec content et, éventuellement, des accessoires pour Navigator.
Le contenu peut prendre en valeur, une valeur de Stacks , Tabs , un tableau d' Screens ou un objet qui décrit la pile et les options pour l'onglet inférieur (décrivant le titre, l'icône, etc.).
constario = navio.build ({
// Les écrans et les piles sont prélevés à partir de l'étape précédente
Tiroirs: {MAINTRAWER: {Layout: {Main: 'Mainstack', Exemple: 'ExampleStack', Playground: ['One', 'Two', 'Three'],}, Options: {...}, // Facultatif NavigatorProps: {...}, // facultatif},
},}); Les modaux sont construits à l'aide Screens et Stacks qui ont été définis auparavant. Vous pouvez les montrer / les présenter à tout moment lors de l'utilisation de l'application.
Un modal peut être défini en passant un tableau d' Screens ou un nom de Stacks .
constario = navio.build ({
// Les écrans et les piles sont prélevés à partir de l'étape précédente
modals: {exampleModal: {stack: 'examplestack', options: {...}, // facultatif},
},}); Ceci est un nom racine de l'application. Il peut s'agir de l'une des Stacks , Tabs ou Drawers .
Vous pouvez modifier la racine de l'application plus tard par navio.setRoot('drawers', 'AppDrawer') ou en modifiant le composant initialRouteName de <navio.App /> .
constario = navio.build ({
// Les piles, les onglets et les tiroirs sont prélevés à partir d'exemples précédents
root: 'tabs.apptabs', // ou 'stacks.mainstack', ou 'drawers.appdrawer'}); Liste des crochets qui seront exécutés sur chaque Stacks , Tabs ou Drawers générés. Utile pour le mode sombre ou le changement de langue.
constario = navio.build ({
Hooks: [Ustranslation],}); Des options par défaut qui seront appliquées pour chaque Stacks , les Tabs , Drawer ou les écrans et conteneurs Modal générés dans l'application.
Note Tous les options des conteneurs et Tabs et des écrans du Drawer ont headerShown: false par défaut (afin de masquer les en-têtes de navigation inutiles). Vous pouvez toujours les modifier, ce qui pourrait être utile si vous souhaitez avoir un bouton natif < Back lorsque vous cachez des onglets (appuyant sur une nouvelle Stack ).
constario = navio.build ({
DefaultOptions: {Stacks: {Screen: {HeadershadowVisible: false, HeadersIntColor: Colors.primary,}, conteneur: {Headershown: true,},}, onglets: {Screen: tabDefaultOptions,}, tiroir: {Screen: DrawerDefaultOptions,},,}, tiroir: {Screen: DrawerDefaultOptions,},,}, tiroir: {Screen: DrawerDefaultOptions,},,}, Dirher: {Screen: DrawerDefaultOptions,},,
},}); Navio génère le composant racine de l'application après la définition de la mise en page. Il peut être utilisé pour le transmettre directement à registerRootComponent() ou pour envelopper avec des fournisseurs supplémentaires ou ajouter plus de logique avant le démarrage de l'application.
const Navio = Navio.Build ({...}); export default () => <Navio.app /> Vous pouvez modifier la racine de l'application par navio.setRoot('drawers', 'AppDrawer') ou en modifiant initialRouteName of <navio.App /> Composant.
C'est la question le plus souvent posée (ici, ici et ici). Ci-dessous, vous pouvez trouver deux solutions:
// Utiliser .Navigate Méthode d'objet de navigation React et passer paramsnavio.n.navigate ('mymodal', {screen: 'screenname', params: {userId: 'someid'}}); // Access Params sur un screenconst screen = () => {
const {userId} = NAVIO.USEPARAMS ();};v0.1.+ // Utilisez .modals.show Méthode de Navio et passe paramsnavio.modals.show ('mymodal', {userId: 'someId'}); // Access Params sur un écran scripnon = () => {
const {userId} = NAVIO.MODALS.GetParams ('MyModal');};Expo Router est une bibliothèque de routage conçue pour les applications natives Universal React à l'aide de l'EXPO. Il fonctionne sur un système de routage basé sur des fichiers, ce qui en fait un excellent choix pour les développeurs qui cherchent à créer des applications pour les plates-formes natives (iOS et Android) et Web à l'aide d'une seule base de code.
Navio, en revanche, adopte une approche de configuration statique, similaire à la méthode de construction de disposition observée dans la navigation native React. Navio cible principalement les plates-formes natives (iOS et Android), avec moins d'accent sur l'optimisation de la compatibilité Web. Dans Navio, la disposition de l'application est configurée dans un seul fichier.
Les deux bibliothèques sont construites au-dessus de la navigation React et peuvent être utilisées conjointement avec elle. Cela signifie que tous les crochets, actions, capacités de liaison profonde et autres fonctionnalités de la navigation React devraient fonctionner de manière transparente avec les deux. Notamment, React Navigation introduit la configuration statique dans V7 (qui n'a pas encore été publiée).
Navio a été essentiel pour le Buddy Marketplace (application iOS), nous aidant à le lancer en seulement 2-3 mois. Son utilisation dans l'application, qui gagne quotidiennement les utilisateurs et nécessite rapidement de nouvelles fonctionnalités, nous permet de nous concentrer davantage sur la création d'une logique métier précieuse au lieu de gérer les tâches de configuration de base.
Cependant, Navio est encore une jeune bibliothèque et n'a pas certaines fonctionnalités, comme l'intégration de liaison profonde transparente, qui est importante pour sa pleine efficacité dans les applications de production. Comme il fait partie d'une application en direct, je prévois de la mettre à jour régulièrement, ajoutant de nouvelles fonctionnalités. Vous pouvez voir ce qui arrive en vérifiant la section Future Plans.
Si vous utilisez Navio dans votre application, j'aimerais avoir de vos nouvelles et s'il y a des fonctionnalités supplémentaires que vous recherchez.
Navio a commencé comme un projet expérimental (et un peu bizarre) visant à minimiser le code répétitif dans la mise en page des applications en utilisant la navigation React. J'aime le concept de configuration statique, où la configuration de la disposition de l'application entière est condensée en un seul fichier. Après l'avoir implémenté dans l'expo-starter et reçu des commentaires positifs, j'ai décidé de l'intégrer dans l'application mobile active. Il y a des fonctionnalités supplémentaires que j'aimerais intégrer dans Navio. L'un des objectifs les plus excitants est de fusionner la navigation React et de réagir les fonctionnalités de navigation native dans une API unifiée, rationalisant encore le processus de développement.
Il y a encore des choses que je voudrais ajouter à la bibliothèque:
.updateOptions() pour un onglet et un tiroir spécifiques.
Les onglets peuvent être placés à l'intérieur du tiroir et vice versa.
Passez des accessoires aux modaux.
Rendez-vous plus facile en fournissant un accessoire linking aux écrans. Problème.
Faites de Navio Universal en ajoutant RNN et RNN-screens.
Étendez Navio Funtionality et Application Dayout.
Intégration facile de Navio avec la navigation React (par exemple, Navio.stack ())
Problèmes TypeScript @ index.tsx Fichier.
N'hésitez pas à ouvrir un problème pour toutes les suggestions.
Ce projet est sous licence MIT
