Este material está dedicado al trabajo de refactorización de la navegación en el desarrollo móvil.
El artículo proporciona ejemplos de posibles problemas, así como soluciones a situaciones difíciles relacionadas con el trabajo de navegación en el desarrollo móvil en React Native.
Consideraremos las principales características y problemas del proyecto Mobile Legacy, paso a paso atravesaremos una cadena de acciones que consiste en establecer una tarea, identificar cuellos de botella, encontrar soluciones a problemas existentes y obtener el resultado deseado.
Ambiente de trabajo
React Native es una plataforma de desarrollo de aplicaciones móviles de código abierto relativamente joven creada por Facebook. Se utiliza para crear aplicaciones para Android, iOS y UWP, y permite a los desarrolladores usar React junto con las capacidades propias de la plataforma.
La navegación es casi el elemento más importante en una aplicación móvil. Al crear la arquitectura de la aplicación, debe prestar especial atención a este tema.
Las bibliotecas más comunes para construir navegación:
- Reaccionar navegación Esta es la biblioteca más popular, que a menudo se menciona en la documentación oficial. En consecuencia, ella tiene muchas estrellas en su alcancía en GitHub.
- React-Native-Navigation. Esta plataforma utiliza las API nativas básicas para iOS y Android. Esta es una alternativa popular a React-Navigation. Es adecuado para aquellos que aprecian el cumplimiento de los acuerdos de la plataforma y no se preocupan demasiado por la personalización.
Bibliotecas menos comunes:
- React-router-native Esta es una biblioteca incompleta. Pero si ya está familiarizado con la API React Router y hace requisitos bastante simples para su aplicación, esta plataforma puede ayudarlo.
- React-Native-Router-Flux. Esta biblioteca se basa en React-Navigation, pero proporciona una API diferente para interactuar con ella.
Mi experiencia
Te contaré brevemente sobre mi experiencia como desarrollador. He estado trabajando con React Native durante más de dos años. Hay varios proyectos completados publicados en tiendas de aplicaciones. Durante este tiempo, logré familiarizarme con una gran cantidad de herramientas en el entorno de React Native. La navegación es a menudo un obstáculo en los proyectos de desarrollo móvil. El proyecto Legacy en el que estaba trabajando no fue la excepción. Esto se discutirá más adelante.
Desafío
El código se duplicó durante la refactorización de la aplicación en lugar de dividir los roles en dos tipos (usuario y administrador). Desafortunadamente, el mismo problema estaba presente en la navegación.
Las características arquitectónicas de la aplicación no se tuvieron en cuenta.
Todas las pantallas se dividieron en tres tipos: pantallas de autorización, pantallas de administrador y pantallas de usuario.
En lugar de una conexión lógica entre la pila raíz y la pestaña Navegador con cambio de roles, hubo una división ilógica en pilas de navegación para roles de usuario.
Además, se repitió la construcción de navegación para cada usuario.
Necesitaba resolver los siguientes problemas:
- Desaceleración general de la aplicación.
- La ausencia de un "pre-renderizador" de las pantallas principales, que no tuvo el mejor efecto en la comodidad de los usuarios.
- La navegación no parecía nativa. Las animaciones de transición fueron notables e inconvenientes para el trabajo.
Agregue una captura de pantalla del componente de ventana modal que sirvió como navegador de pestañas.
- Pantallas de "insistencia" en la pila de navegación, es decir no hubo descarga (purificación). Las pantallas que abrimos estaban almacenadas en la pila. Por lo tanto, una pérdida de memoria y el posterior bloqueo de la aplicación era casi inevitable.
Solución
Resultados del trabajo:
- El problema relacionado con la optimización de la navegación, la falta de un renderizador previo y la desaceleración general se resolvió actualizando la biblioteca de navegación, usando el navegador de pestañas y negándose a usar la ventana modal autoestimada como navegador.
- Después de refactorizar, la navegación se volvió más natural. El seguimiento del trabajo de las animaciones de transición, así como la reproducción previa de las pantallas principales en pestañas, han aumentado la comodidad del usuario.
- La navegación se apiló en la pestaña de navegación. El uso de la transición se controló mejor. Se utilizaron transiciones al nivel superior.
Se utilizaron los siguientes métodos para la versión React-Navigation:
- popToTop - ir a la pantalla principal en la pila
- reemplazar: reemplaza la ruta actual por una nueva
- restablecer: borra el estado del navegador y lo reemplaza con el resultado de varias acciones
Resultados
Logré deshacerme de la mayoría de las pantallas de navegación duplicadas y construir una estructura más lógica.
En el proceso de refactorización, toda la navegación fue rediseñada. Parte de la refactorización de la navegación también incluyó deshacerse de las pantallas dobles y crear una estructura de navegación unificada. Las pantallas que se suponía que estaban ubicadas fuera de las pestañas estaban en el navegador raíz, y las pantallas de la pestaña del navegador se pueden ver en la captura de pantalla.
Conclusiones
En resumen, quisiera señalar una vez más la importancia de las bibliotecas de navegación, así como prestar atención al uso de las estrategias más efectivas para trabajar con ellas y un estudio en profundidad de la documentación técnica. De lo contrario, dedicará mucho tiempo y esfuerzo a refactorizar y procesar un proyecto existente y su código base.
Elegir una biblioteca de navegación es un paso importante en el desarrollo de su aplicación. Cualquier decisión tomada sin la debida consideración y precaución puede dañar la escalabilidad o crear otros problemas.
Enlaces utiles:
Reaccionar navegaciónReaccionar nativoProblemas de desarrollo del proyecto móvil heredadoReact-native-navigationReact-router-nativeReact-native-router-flux