Cómo construir un menú de cajón anidado con React Native

El espacio en la pantalla es un bien preciado en el móvil. El menú del cajón (o "menú de hamburguesa") es uno de los patrones de navegación más populares que le ayuda a guardarlo mientras ofrece una navegación intuitiva. En esta publicación, desmitificaré cómo construir un menú de cajón anidado (de varios niveles) usando React Native y React Navigation. ?

Pruebe la demostración en vivo en un dispositivo móvil o en la web. ?

Navegación en React Native ⚛️

La navegación es la columna vertebral de una gran mayoría de aplicaciones creadas para producción. La apariencia de la navegación es importante para impulsar el uso y la participación en las aplicaciones móviles.

Sin embargo, si eres un desarrollador de React Native, no hay una opinión clara cuando se trata de crear un menú de navegación. React Native recomienda un montón de bibliotecas para la navegación. Cada uno tiene su fuerza, según sus necesidades, pero no hay un ganador claro para todos los casos de uso.

Actualmente, ninguna de las bibliotecas de navegación admite cajones anidados listos para usar. Pero una de las bibliotecas que proporciona una API enriquecida para crear soluciones personalizadas es React Navigation, una navegación basada en JavaScript. Está fuertemente respaldado y mantenido por la comunidad React Native. Esto es lo que usaremos en este tutorial.

¿El caso de uso? ️

Tuve que crear una aplicación de juegos para mostrar una biblioteca de componentes de interfaz de usuario para React Native. Consta de ocho componentes diferentes, cada uno de los cuales admite varios accesorios y más de 50 opciones diferentes.

No era posible mostrar todas las opciones dentro del cajón al mismo tiempo sin un cajón de varios niveles que abarcaría las opciones según el componente seleccionado. No pude encontrar una solución lista para esto, así que necesitaba construir una personalizada.

Configuración básica?

Para la configuración básica, supongo que ya tiene una configuración de proyecto React Native con CRNA, Expo Kit o React Native CLI. Asegúrese de tener instalada la biblioteca react-navigation con yarn o npm. Comenzaremos de inmediato con el uso de la API de navegación.

No dude en consultar la guía de introducción antes de continuar si no está familiarizado con React Navigation API.

Comenzaremos con un ejemplo similar al documentado en la guía oficial DrawerNavigator de React Navigation. Crearemos un cajón simple que tiene dos elementos de cajón: Inicio y Notificaciones.

Contenido de cajón personalizado

React Navigation permite que todos los navegadores realicen muchas personalizaciones al pasar una configuración de navegador como segundo parámetro. Lo usaremos para representar contenido personalizado que no sean los elementos del cajón de existencias.

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

Pasaremos un prop llamado contentComponenta la configuración que nos permitiría renderizar contenido personalizado para el cajón. Vamos a utilizar eso para mostrar un encabezado y pie junto con la prevaleciente DrawerItemsdesde react-navigation.

Esto potencialmente desbloquea muchas cosas que se pueden hacer al controlar qué renderizar dentro del cajón.

Creando mapeo de pantalla

Necesitamos construir un cajón anidado para cada componente que queremos exhibir. Así que primero registremos todas las pantallas con la configuración de DrawerNavigator. Hemos creado un archivo de mapeo de pantalla separado para componentes. Puede tener su propia convención o definir el objeto directamente de forma similar al componente de la pantalla de inicio.

El mapeo de pantalla consta de objetos simples con propiedad de pantalla. El screenMappingobjeto se parece a esto:

Después de registrar todos los componentes, el cajón se vería así:

Esto representaría todos los componentes junto con sus opciones. Tenemos dos componentes principales: DataSearch y TextField. Cada uno tiene opciones como "Con posición de icono", "Con marcador de posición" y más. Nuestra tarea es segregarlos en una lista de componentes únicos (DataSearch, TextField).

Cajón exterior de agrupación

Un patrón que seguí en el mapeo fue usar un delimitador _para agrupar opciones de un componente. Por ejemplo, las teclas de navegación que utilicé fueron "DataSearch_Basic" y "DataSearch_With Icon Position". Esto es exactamente lo que nos ayudará a combinar las opciones para un solo componente como DataSearch. Evaluaremos de forma única todos los componentes que necesitamos mostrar para el cajón exterior.

Crearemos una función útil para evaluar los elementos de la lista del cajón externo para renderizar.

Esta función devolverá un objeto con componentes únicos para los componentes principales como (DataSearch, TextField) que representaremos en la pantalla con la ayuda del contentComponentcomponente personalizado. También mantendremos un booleano para determinar el contenido renderizado en el cajón en un instante particular.

El renderMainDrawerComponentes simplemente una función de iteración sobre las teclas del objeto componentes. Presenta elementos de cajones exteriores personalizados construidos sobre simple Texty Viewdesde react-native. Consulta el código completo aquí.

Esto hará que el cajón sea así:

¿Renderizando el cajón infantil?

Ahora, necesitamos mostrar las opciones basadas en el componente que se toca. Es posible que haya notado que en utils, también extraemos los índices de inicio y finalización de los grupos de componentes según el patrón delimitador.

Por ejemplo, las pantallas de búsqueda de datos comienzan en el índice 1 (el índice 0 es la pantalla de inicio) y termina en 3. TextField comienza en 3 y termina en 5. Usaremos estos índices para cortar mágicamente los itemsque se pasan a DrawerItemssegún el componente seleccionado y sus índices.

Ahora, después de tocar DataSearch, el cajón cederá en algo como esto:

También hemos agregado un dulce botón de retroceso que básicamente cambia un booleano para representar los elementos del cajón principal. Puedes consultar el código completo aquí.

Ahora, lo único que queda por hacer es hacer que los elementos del cajón se vean más limpios recortando el nombre del componente redundante. Nuevamente, la rica API de React Navigation es útil aquí.

Hay varias propiedades con las que podemos pasar navigationOptions. Uno en particular que vamos a usar aquí es el titleaccesorio con el mapeo de pantalla. Esto nos permitirá eliminar la parte antes del primer delimitador. Por lo tanto, "DataSearch_Basic" se mostrará solo como "Básico".

Eso es todo. Podemos agregar tantos elementos como queramos según el patrón delimitador. La aplicación de juegos que hemos creado consta de ocho componentes principales y más de 53 opciones en total.

Aquí está el enlace a la aplicación final y al código base.

Resumen ?

  • Configuración básica: DrawerNavigation hello world de docs.
  • Contenido del cajón personalizado : renderice los elementos del cajón con contentComponent.
  • Mapeo de pantallas : Defina y registre todos los componentes de los cajones.
  • Agrupar cajón exterior : lea el patrón delimitador para agrupar elementos del cajón.
  • Renderizado del cajón infantil : corte y renderice elementos del cajón secundario.

¿Conclusión?

Aprendimos a construir un menú de cajones de varios niveles con React Native. Usamos React Navigation API para renderizar un componente de contenido personalizado dentro del cajón, y usamos el patrón delimitador para el mapeo de la pantalla. Utilice este patrón para construir cualquier nivel de representación anidada o condicional para cajones.

ReactiveSearch?

Proporciona componentes de interfaz de usuario para plataformas nativas y web para crear experiencias de búsqueda perfectas. Puede comprobar todos los componentes que ofrece jugando con la propia aplicación del patio de recreo o creando su propio componente.

appbaseio / reactivesearch

reactivesearch: una biblioteca de componentes de interfaz de usuario de React y React Native para crear aplicaciones basadas en datos github.com