Durante el desarrollo de aplicaciones móviles en React Native, probé varias bibliotecas estándar para la navegación, pero al usar cada una de ellas sentí un dolor terrible e infernal. Fueron tan incómodos y obvios que el desarrollo de incluso las características aparentemente más simples se convirtió en una búsqueda excepcional.
Usando react-navigation o react-native-router-flux, si necesita hacer una pantalla a la que se pueda acceder desde varios lugares diferentes, será muy difícil crear una jerarquía de rutas anidadas para que todo funcione como debería. O si necesita que aparezca una pantalla con animación no predeterminada, también debe inhalar. Además, la idea dañina y destructiva de incluir componentes de la interfaz de usuario como la barra de navegación superior y las pestañas está incorporada en estas bibliotecas. Esto es una violación directa del enfoque unix-way, cuando una biblioteca realiza una y solo una función, pero cualitativamente. Debido a la estrecha conexión de los componentes de la interfaz de usuario con la navegación, a menudo surgen errores: aparecen varias barras de navegación en la pantalla, una de las cuales puede tener un botón de retroceso y otro nombre de pantalla.
Teniendo mucho dolor sofocante con las bibliotecas estándar, decidí desarrollar mi propio navegador. Los objetivos principales en el desarrollo fueron la simplicidad de la API, la falta de una estructura rígida para las pantallas de anidación y la separación de las animaciones del contenido. Así nació react-native-easy-router.
Simplicidad API y falta de estructura rígida
En los navegadores que utilicé anteriormente, los parámetros pasados a la pantalla solo se podían acceder a lo largo de una ruta compleja como `router.state.params.name`. En mi navegador, paso los parámetros directamente al componente de la pantalla. En algunos casos, esto puede conducir a un conflicto de nombres, pero decidí descuidar la solución a este problema. También en el código a continuación puede ver que las rutas no tienen una estructura clara y puede agregar cualquier pantalla nueva desde cualquier otra pantalla.
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" />
Animaciones
Es aún más fácil trabajar con la animación. Si en react-navigation y react-native-router-flux fue necesario esquivar para hacer una animación no predeterminada para una pantalla en particular, entonces en react-native-easy-router la pantalla puede volar con diferentes animaciones y, además, la pantalla puede volar y vuela con diferentes animaciones. Por ejemplo, en el ejemplo a continuación, la pantalla volará desde abajo y hacia la derecha.
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" />
Incluso puedes agregar tus propias animaciones personalizadas. Tal vez quieras que la pantalla salga volando de la esquina inferior derecha y caiga al mismo tiempo. Un ejemplo de cómo hacer esto se puede encontrar
aquí .
Conclusión
El navegador desarrollado ya se utiliza en varios de nuestros proyectos comerciales, y ha recibido una pequeña distribución y críticas cálidas entre algunos desarrolladores de React Native. Si desea ver más ejemplos de uso y decidir si es posible usar este navegador en su proyecto, puede buscar en
el repositorio del proyecto.