rn navio Download - rn navio Source Code Download

rn navio

Anderer Quellcode

v0.1.0

Herunterladen

Navio

Navio ist eine Navigationsbibliothek für React Native, die auf der React Navigation gebaut wurde. Das Hauptziel ist es, DX zu verbessern, indem das App -Layout an einem Ort erstellt und die Leistung von Typenkripten verwendet wird, um Autocompletion und andere Funktionen bereitzustellen.

Mit Navio können Sie auf einfache Weise verschiedene Arten von Apps erstellen: unter Registerkarten basiert, einfacher Einzelbildschirm und Apps mit Schubladenlayouts. Es kümmert sich um alle Boilerplate -Code -Konfiguration für Navigatoren, Bildschirme, Stapel, Registerkarten und Schubladen unter der Motorhaube, sodass Sie sich auf die Entwicklung der Geschäftslogik Ihrer App konzentrieren können.

Wenn Navio Ihnen in gewisser Weise geholfen hat, unterstützen Sie es mit ️

☣️ Navio ist immer noch eine junge Bibliothek und hat möglicherweise in Zukunft Veränderungen. Schauen Sie sich an, ob Navio produktionsbereit ist

QuickStart

Abhängigkeiten installieren

 Garn fügen RN-Navio hinzu

Navigationsabhängigkeiten reagieren

Da Navio auf der React Navigation aufgebaut ist, müssen die folgenden Bibliotheken installiert werden:

 Garn add @react-navigation/stack @react-navigation/native @react-navigation/native-stack @react-navigation/bottabs @react-navigation/schublade

Weitere Informationen finden Sie in den Installationsschritten.

Erstellen Sie Ihr erstes Navio -Layout

Dieser Code erstellt eine einfache App mit einem Bildschirm.

 // app.tsximport {text} aus 'React-nativer'; import {navio} aus 'rn-navio'; const home = () => {
  return <text> Startseite </text>;}; const navio = navio.build ({{{{{{{{
  Bildschirme: {Home},
  Stapel: {Homestack: ['Home'],
  },
  root: 'stacks.homSestack',}); export default () => <navio.app />;

Tab-basierte App mit 2 Registerkarten

 // app.tsximport {text} aus 'React-nativer'; import {navio} aus 'rn-navio'; const home = () => {
  Rückgabe <text> Startseite </text>;}; const Settings = () => {
  Rückgabe <text> Einstellungen Seite </text>;}; const navio = navio.build ({{{{{{{{{
  Bildschirme: {Home, Einstellungen},
  Stapel: {Homestack: ['Home'], SettingStack: ['Einstellungen'],
  },
  Registerkarten: {Apptabs: {Layout: {hometab: {stack: 'homestack'}, settingStab: {stack: 'settsStack'},},},
  },
  root: 'tabs.apptabs',}); exportieren default () => <navio.app />;

Wenn Sie ein komplexeres und exotischeres Beispiel sehen möchten, folgen Sie diesem Link.

Spielplatz

Reagieren Sie native Starter

Sie können ein neues Projekt mit NAVIO von Expo-Starter starten:

 NPX CLI-RN Neue App

Expo -Snack

Spielen Sie mit der Bibliothek im Expo -Snack.

Navigations -API

Navio bietet einen Sammel mit Aktionen zur Durchführung der Navigation innerhalb der App. Angenommen, Sie haben ein navio -Objekt:

Gemeinsam

.N
Aktuelles Navigationsobjekt aus der React -Navigation. Sie können diese Aktionen ausführen.
.push(name, params?)
Fügt eine Route über den Stapel hinzu und navigiert nach vorne.
.goBack()
Ermöglicht, zur vorherigen Route in der Geschichte zurückzukehren.
.setParams(name, params)
Ermöglicht die Aktualisierung der Parameter für eine bestimmte Route.
.setRoot(as, rootName)
Legt ein neues App -Root fest. Es kann verwendet werden, um Stacks , Tabs und Drawers zu wechseln.

Stapel

Stapelbezogene Aktionen.

.stacks.push(name)
Fügt eine Route über den Stapel hinzu und navigiert nach vorne. Es kann die Registerkartenleiste ausblenden.
.stacks.pop(count?)
Bringt Sie zurück zu einem vorherigen Bildschirm im Stapel.
.stacks.popToTop()
Bringt Sie zurück zum ersten Bildschirm im Stapel und entlässt alle anderen.
.stacks.setRoot(name)
Legt ein neues App -Root aus Stapeln fest.

Registerkarten

Registerkartenbezogene Aktionen.

.tabs.jumpTo(name)
Wird verwendet, um zu einer vorhandenen Route im Tab Navigator zu springen.
.tabs.updateOptions(name, options)
Aktualisieren Sie die Optionen für eine bestimmte Registerkarte. Wird verwendet, um die Abzeichenanzahl zu ändern.
.tabs.setRoot(name)
Legt ein neues App -Root von Registerkarten fest.

Schubladen

Maßnahmen im Zusammenhang mit Schubladen.

.drawers.open()
Verwendet, um den Schubladenbereich zu öffnen.
.drawers.close()
Verwendet, um den Schubladenbereich zu schließen.
.drawers.toggle()
Zum Öffnen der Schubladenscheibe, falls geschlossen, oder schließen Sie, wenn sie geöffnet sind.
.drawers.jumpTo(name)
Wird verwendet, um zu einer vorhandenen Route im Navigator der Schubladen zu springen.
.drawers.updateOptions(name, options)
Aktualisieren Sie die Optionen für einen bestimmten Menügehalt für Schubladen. Wird verwendet, um seinen Titel zu ändern.
.drawers.setRoot(name)
Legt ein neues App -Root aus Schubladen fest.

Modale

Modalbezogene Aktionen.

.modals.show(name, params)
Wird verwendet, um ein vorhandenes Modal- und Durchgangsparams anzuzeigen.
.modals.getParams(name)
Gibt Parameter zurück, die für Modal on .show () Methode übergeben wurden.

Haken

Nützliche Haken.

.useN()
Duplikat von useNavigation() Hook aus der React -Navigation. Wird für die Bequemlichkeit in Bildschirmen verwendet, um Zugriff auf Navigationsobjekt zu erhalten. Dokumente.
.useR()
Duplikat von useRoute() Hook aus der React Navigation. Wird verwendet, um in den Bildschirmen den Zugriff auf Routenobjekte zu erhalten. Dokumente
.useParams()
Wird für den schnellen Zugriff auf Navigationsroutenparameter verwendet. Wird verwendet, um in Bildschirmen zu bequem zu sein, wenn sie Parameter übergeben.

Layoutstruktur

Navio benötigt screens und mindestens einen stacks um ein App -Layout zu erstellen. tabs , drawers , modals , root , hooks und defaultOptions sind optional und werden für erweiterte App -Layouts verwendet.

Bildschirme

Dies sind Hauptsteine Ihrer App mit Navio. Sie können sie für jeden Stapel wiederverwenden, den Sie bauen möchten.

Ein Bildschirm kann definiert werden, indem eine einfache Reaktionskomponente bestanden wird. Wenn Sie einige Optionen übergeben möchten, die den Bildschirm beschreiben, können Sie auch ein Objekt übergeben.

Beispiel

 Import {screen1, screen3} aus '@app/screens'; const navio = navio.build ({{{{{{{{{{{{{
  Bildschirme: {One: Screen1, Two: () => {return <> </>;} Drei: {Komponente: screen3, Optionen: (props) => ({title: 'ThreeOne'})}
  },});

Stapel

Stapel werden mit zuvor definierten Screens erstellt. IDEs sollten bei der Autocompletion für einen besseren DX helfen.

Ein Stapel kann definiert werden, indem eine Reihe von Screens bestanden wird. Wenn Sie einige Optionen an Stack Navigator weitergeben möchten, können Sie ein Objekt übergeben.

Beispiel

 const navio = navio.build ({{
  // Bildschirme stammen aus dem vorherigen Schritt
  Stapel: {MainStack: ['One', 'Two'], ExamPlestack: {Screens: ['Three'], NavigatorProps: {vecreclisteners: {Focus: () => {},},},},
  },});

Registerkarten

Die Registerkarten werden mit Screens , Stacks und Drawers erstellt, die zuvor definiert wurden.

Registerkarten können definiert werden, indem ein Objekt mit content und optional Requisiten für Navigator bestanden wird.

Der Inhalt kann als Wert von Stacks , Drawers , Screens oder als Objekt, das Stack und Optionen für die Registerkarte unten beschreibt (beschreiben Titel, Symbol usw.) dauern.

Beispiel

 const navio = navio.build ({{
  // Bildschirme und Stapel stammen aus dem vorherigen Schritt
  Registerkarten: {AppTabs: {Layout: {montaB: {Stack: ['One', 'Two'], // oder Drawer: 'somedrawer', options: () => ({title: 'main',}), }, ExamPletab: {stack: 'examplePack', // oder schublade: 'somedrawer', option: () => ({title: 'example',, }),},}, Optionen: {...}, // optionale NavigatorProps: {...}, // optional},
  },});

Schubladen

Schubladen werden mit Screens , Stacks und Tabs erstellt, die zuvor definiert wurden.

Schubladen können definiert werden, indem ein Objekt mit content und optional Requisiten für Navigator bestanden wird.

Der Inhalt kann als Wert von Stacks , Tabs , Screens oder einem Objekt, das Stack und Optionen für die Registerkarte unten beschreibt (Beschreibung des Titels, Symbols usw.) dauern.

Beispiel

 const navio = navio.build ({{
  // Bildschirme und Stapel stammen aus dem vorherigen Schritt
  Schubladen: {MainDrawer: {Layout: {Main: 'MainStack', Beispiel: 'ExamPlestack', Playground: ['One', 'Two', 'Three'],}, Optionen: {...}, // optional NavigatorProps: {...}, // optional},
  },});

Modale

Modale werden mit Screens und Stacks erstellt, die zuvor definiert wurden. Sie können sie während der Verwendung der App zu jedem Zeitpunkt anzeigen/präsentieren.

Ein Modal kann definiert werden, indem ein Array von Screens oder einen Namen Stacks bestanden wird.

Beispiel

 const navio = navio.build ({{
  // Bildschirme und Stapel stammen aus dem vorherigen Schritt
  Modale: {evicyPlemodal: {Stack: 'examplePack', Optionen: {...}, // optional},
  },});

Wurzel

Dies ist ein Root -Name der App. Es kann einer von Stacks , Tabs oder Drawers sein.

Sie können das Root der App später durch navio.setRoot('drawers', 'AppDrawer') oder durch Ändern des initialRouteName von <navio.App /> ändern.

Beispiel

 const navio = navio.build ({{
  // Stapel, Registerkarten und Schubladen stammen aus früheren Beispielen
  root: 'tabs.apptabs', // oder 'stacks.mainStack' oder 'schorings.appdrawer'});

Haken

Liste der Hooks, die auf jedem generierten Stacks , Tabs oder Drawers Navigatoren ausgeführt werden. Nützlich für den dunklen Modus oder eine Sprachänderung.

Beispiel

 const navio = navio.build ({{
  Haken: [Usetranslation],});

Standardoptionen

Standardoptionen, die pro Stacks , Tabs , Drawer oder Modal Bildschirme und Container, die in der App erzeugt wurden, angewendet werden.

Note alle Bildschirme von Containern und Tabs und Drawer standardmäßig headerShown: false (um unnötige Navigationsheader auszublenden) zu verbergen sind. Sie können sie jederzeit ändern, was möglicherweise nützlich ist, wenn Sie beim Verstecken von Registerkarten einen nativen < Back Taste haben möchten (um einen neuen Stack zu drücken).

Beispiel

 const navio = navio.build ({{
  defaultOptions: {stacks: {  screen: {headerShadowVisible: false,headerTintColor: Colors.primary,  },  container: {headerShown: true,  },},tabs: {  screen: tabDefaultOptions,},drawer: {  screen: drawerDefaultOptions,},
  },});

App

Navio generiert Root -Komponente für die App, nachdem das Layout definiert wurde. Es kann verwendet werden, um es direkt an registerRootComponent() zu verabschieden oder mit zusätzlichen Anbietern einzuwickeln oder vor dem Start der App weitere Logik hinzuzufügen.

 const navio = navio.build ({...}); export default () => <navio.app />

Sie können das Root der App durch navio.setRoot('drawers', 'AppDrawer') oder durch Ändern des initialRouteName von <navio.App /> ändern.

FAQs

Übergeben von Params an ein Modal

Dies wird am häufigsten gestellt (hier, hier und hier). Unten finden Sie zwei Lösungen:

Alter Ansatz mit React Navigation Objekt

 // Verwenden Sie .Navigate Methode des React -Navigationobjekts und der Übergabe paramsnavio.naVigate ('myModal', {Bildschirm: 'screenname', Params: {userId: 'EinigeID'}}); // Zugriff auf Params auf einem Screenconst -Bildschirm = () => {
  const {userId} = navio.useParams ();};

Neuer Ansatz mit Navio `v0.1.+`

 // Verwenden Sie .modals.show Methode von Navio und Pass paramsnavio.modals.show ('myModal', {userId: 'EinigeID'}); // Zugriff auf Parameter auf einem screenconst screen = () => {
  const {userId} = navio.modals.getParams ('myModal');};

Was ist der Unterschied zwischen Expo -Router, Navio und React Navigation?

Expo -Router ist eine Routing -Bibliothek, die für universelle React -native Anwendungen mit Expo entwickelt wurde. Es arbeitet in einem dateibasierten Routing-System und macht es zu einer hervorragenden Wahl für Entwickler, die Anwendungen für native (iOS und Android) und Webplattformen mit einer einzigen Codebasis erstellen möchten.

Navio hingegen verfolgt einen statischen Konfigurationsansatz, ähnlich der Layoutbuilding -Methode, die in der React Native Navigation beobachtet wird. NAVIO zielt hauptsächlich auf native Plattformen (iOS und Android) ab, wobei weniger die Optimierung der Webkompatibilität liegt. In NAVIO ist das Anwendungslayout in einer einzelnen Datei konfiguriert.

Beide Bibliotheken sind auf der React -Navigation aufgebaut und können in Verbindung damit verwendet werden. Dies bedeutet, dass alle Haken, Aktionen, tiefe Verbindungsfunktionen und andere Merkmale der React -Navigation voraussichtlich mit beiden nahtlos funktionieren. Insbesondere führt die React Navigation eine statische Konfiguration in V7 ein (die noch nicht freigegeben werden muss).

Ist Navio-Produktionsbereit?

Navio war für den Buddy Marketplace (iOS-App) unerlässlich und half uns, ihn in nur 2-3 Monaten zu starten. Die Verwendung in der App, die täglich Benutzer gewinnt und schnell neue Funktionen benötigt, ermöglicht es uns, uns mehr auf die Erstellung einer wertvollen Geschäftslogik zu konzentrieren, anstatt sich mit grundlegenden Aufgaben zu befassen.

Navio ist jedoch immer noch eine junge Bibliothek und es fehlen einige Funktionen, wie die nahtlose Deep -Verknüpfungsintegration, die für die volle Effektivität in Produktions -Apps wichtig sind. Da es Teil einer Live -App ist, habe ich vor, sie regelmäßig zu aktualisieren und neue Funktionen hinzuzufügen. Sie können sehen, was kommt, indem Sie den Abschnitt Zukunftspläne überprüfen.

Wenn Sie Navio in Ihrer App verwenden, würde ich gerne von Ihnen hören, und wenn Sie zusätzliche Funktionen suchen, suchen Sie.

Zukunftspläne

Navio begann als experimentelles (und etwas seltsames) Projekt, das darauf abzielte, sich wiederholten Code im App -Layout mithilfe der React Navigation zu minimieren. Ich mag das Konzept der statischen Konfiguration, wobei das gesamte App -Layout -Setup zu einer einzelnen Datei zusammengefasst ist. Nachdem ich es innerhalb des Expo-Starters implementiert und positives Feedback erhalten hatte, entschied ich mich, es in die aktive mobile App zu integrieren. Es gibt zusätzliche Funktionen, die ich gerne in Navio integrieren möchte. Eines der aufregendsten Ziele ist die Zusammenführung der Reaktionsnavigation und die Reaktion der nativen Navigationsfunktionen in eine einheitliche API, wodurch der Entwicklungsprozess noch weiter optimiert wird.

Verbesserungen

Es gibt immer noch einige Dinge, die ich der Bibliothek hinzufügen möchte:

.updateOptions() für spezifische Registerkarten und Schublade.
Laschen können in Schublade platziert und umgekehrt.
Übergeben Sie Requisiten an Modale.
Erleichtern Sie das Deeplinking, indem Sie linking mit Bildschirmen zur Verfügung stellen. Ausgabe.
Machen Sie Navio Universal, indem Sie RNN und RNN-Screens hinzufügen.
Erweitern Sie Navio -Funktionen und App -Layout.
Einfache Integration von NAVIO mit React Navigation (z. B. Navio.stack ())
TypeScript -Ausgaben @ index.tsx Datei.