Pendant le développement d'applications mobiles sur React Native, j'ai essayé plusieurs bibliothèques standard pour la navigation, mais en utilisant chacune d'elles, j'ai ressenti une douleur terrible et infernale. Ils ont été rendus si incommodes et si évidents que le développement des fonctionnalités apparemment les plus simples s'est transformé en une quête exceptionnelle.
En utilisant react-navigation ou react-native-router-flux, si vous avez besoin de créer un écran accessible à partir de plusieurs endroits différents, il vous sera très difficile de créer une hiérarchie de routes imbriquées afin que tout fonctionne comme il se doit. Ou si vous avez besoin d'un écran pour apparaître avec une animation non par défaut, vous devez également gonfler. De plus, l'idée nuisible et destructrice d'inclure des composants d'interface utilisateur comme la barre de navigation et les onglets supérieurs est incorporée dans ces bibliothèques. Il s'agit d'une violation directe de l'approche unix-way, lorsqu'une bibliothèque exécute une et une seule fonction, mais qualitativement. En raison de la connexion étroite des composants de l'interface utilisateur avec la navigation, des bogues surviennent très souvent - plusieurs barres de navigation apparaissent à l'écran, dont l'une peut avoir un bouton de retour et un autre nom d'écran.
Ayant beaucoup de chagrin d'étouffement avec les bibliothèques standard, j'ai décidé de développer mon propre navigateur. Les principaux objectifs du développement étaient la simplicité de l'API, l'absence d'une structure rigide pour imbriquer les écrans et la séparation des animations du contenu. Donc, react-native-easy-router était né.
Simplicité API et manque de structure rigide
Dans les navigateurs que j'ai utilisés précédemment, les paramètres transmis à l'écran n'étaient accessibles que le long d'un chemin complexe comme `router.state.params.name`. Dans mon navigateur, je passe les paramètres directement au composant écran. Dans certains cas, cela peut conduire à un conflit de nom, mais j'ai décidé de négliger la solution à ce problème. Dans le code ci-dessous, vous pouvez également voir que les itinéraires n'ont pas de structure claire et vous pouvez ajouter un nouvel écran à partir de n'importe quel autre écran.
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" />
Des animations
L'animation est encore plus facile à travailler. Si, dans react-navigation et react-native-router-flux, il était nécessaire d'esquiver pour créer une animation non par défaut pour un écran particulier, alors dans react-native-easy-router, l'écran peut voler avec différentes animations, et de plus, l'écran peut voler dans et voler avec différentes animations. Par exemple, dans l'exemple ci-dessous, l'écran volera d'en bas et volera vers la droite.
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" />
Vous pouvez même ajouter vos propres animations personnalisées. Peut-être que vous voulez que l'écran vole dans le coin inférieur droit et tombe en même temps. Un exemple de la façon de procéder peut être trouvé
ici .
Conclusion
Le navigateur développé est déjà utilisé dans plusieurs de nos projets commerciaux et a reçu une petite distribution et des critiques chaleureuses de la part de certains développeurs React Native. Si vous souhaitez voir plus d'exemples d'utilisation et décider si vous pouvez utiliser ce navigateur dans votre projet, vous pouvez creuser dans
le référentiel du projet.