Während der Entwicklung mobiler Anwendungen auf React Native habe ich verschiedene Standardbibliotheken für die Navigation ausprobiert, aber bei der Verwendung jeder dieser Bibliotheken hatte ich nur schreckliche, höllische Schmerzen. Sie wurden so unpraktisch und nicht offensichtlich gemacht, dass die Entwicklung selbst der einfachsten scheinbaren Merkmale zu einer herausragenden Aufgabe wurde.
Wenn Sie mit React-Navigation oder React-Native-Router-Flux einen Bildschirm erstellen müssen, auf den von mehreren verschiedenen Stellen aus zugegriffen werden kann, ist es für Sie sehr schwierig, eine Hierarchie verschachtelter Routen so zu organisieren, dass alles ordnungsgemäß funktioniert. Oder wenn Sie einen Bildschirm mit nicht standardmäßiger Animation benötigen, müssen Sie auch puffen. In diesen Bibliotheken ist auch die schädliche und zerstörerische Idee enthalten, UI-Komponenten wie die obere Navigationsleiste und Registerkarten einzubeziehen. Dies ist eine direkte Verletzung des Unix-Way-Ansatzes, wenn eine Bibliothek eine und nur eine Funktion ausführt, jedoch qualitativ. Aufgrund der engen Verbindung der UI-Komponenten mit der Navigation treten sehr häufig Fehler auf. Auf dem Bildschirm werden mehrere Navigationsleisten angezeigt, von denen eine möglicherweise eine Zurück-Schaltfläche und einen anderen Bildschirmnamen enthält.
Ich hatte viel Erstickungsgefahr mit den Standardbibliotheken und beschloss, meinen eigenen Navigator zu entwickeln. Die Hauptziele bei der Entwicklung waren die Einfachheit der API, das Fehlen einer starren Struktur zum Verschachteln von Bildschirmen und die Trennung von Animationen und Inhalten. So wurde der React-Native-Easy-Router geboren.
API-Einfachheit und fehlende starre Struktur
In den zuvor verwendeten Navigatoren konnte auf die an den Bildschirm übergebenen Parameter nur über einen komplexen Pfad wie "router.state.params.name" zugegriffen werden. In meinem Navigator übergebe ich die Parameter direkt an die Bildschirmkomponente. In einigen Fällen kann dies zu einem Namenskonflikt führen, aber ich habe beschlossen, die Lösung für dieses Problem zu vernachlässigen. Auch im folgenden Code können Sie sehen, dass die Routen keine klare Struktur haben, und Sie können jeden neuen Bildschirm von jedem anderen Bildschirm aus hinzufügen.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({ name: 'John' })}>Go forward</Text> </View> ) const Second = ({ router, name }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text>Hello {name}!</Text> <Text onPress={() => router.pop()}>Go back</Text> </View> ) const routes = { First, Second } export default () => <Router routes={routes} initialRoute="First" />
Animationen
Die Animation ist noch einfacher zu bearbeiten. Wenn bei React-Navigation und React-Native-Router-Flux ein Ausweichen erforderlich war, um eine nicht standardmäßige Animation für einen bestimmten Bildschirm zu erstellen, kann der Bildschirm bei React-Native-Easy-Router mit verschiedenen Animationen einfliegen, und außerdem kann der Bildschirm einfliegen und mit verschiedenen Animationen ausfliegen. Im folgenden Beispiel fliegt der Bildschirm beispielsweise von unten nach rechts.
import React from 'react' import Router from 'react-native-easy-router' import { Text, View } from 'react-native' const First = ({ router }) => ( <View style={{ backgroundColor: 'white', flex: 1 }}> <Text>First screen</Text> <Text onPress={() => router.push.Second({}, {type:'bottom'})}>Go to second screen</Text> </View> ) const Second = ({ router }) => ( <View style={{ backgroundColor: 'pink', flex: 1 }}> <Text>Second screen</Text> <Text onPress={() => router.pop({type:'right'})}>Go back</Text> </View> ) export default () => <Router routes={{ Screen1, Screen2 }} initialRoute="Screen1" />
Sie können sogar Ihre eigenen benutzerdefinierten Animationen hinzufügen. Vielleicht möchten Sie, dass der Bildschirm aus der unteren rechten Ecke herausfliegt und gleichzeitig stürzt. Ein Beispiel dafür finden Sie
hier .
Fazit
Der entwickelte Navigator wird bereits in mehreren unserer kommerziellen Projekte verwendet und hat bei einigen Entwicklern von React Native eine geringe Verbreitung und warme Bewertungen erhalten. Wenn Sie weitere Anwendungsbeispiele sehen und entscheiden möchten, ob dieser Navigator in Ihrem Projekt verwendet werden kann, können Sie sich
im Projekt-
Repository umsehen .