Envuelva sus componentes nativos de reacción

Nota: esta publicación es antigua. No creo que todavía diga que los componentes de texto "ajustados" son la mejor práctica. En cambio, he estado definiendo la media docena de estilos de fuente que utilicé en un archivo separado que se puede importar y difundir en definiciones de estilo (o emoción) según sea necesario.

Se podría pensar que, dado que los componentes principales de React Native son clases, deberían ampliarse. Pero como ha dicho Dan Abramov, esa no es una gran idea. Podría implementar componentes de orden superior, pero realmente lo que probablemente necesite es reemplazar el uso de ciertos componentes centrales de reacción nativa con algo un poco más potente. Ahí es donde entra el envoltorio.

Simplemente envolviendo un componente RN central en un poco de funcionalidad de IU, mantiene limpio su código y también establece propiedades globales. Para desarrolladores RN experimentados, revise sus hojas de estilo y encuentre cuántas veces usa la Hoja de estilo para manejar las preocupaciones de diseño. ¿Quieres deshacerte de eso? Yo si. Para los principiantes, espero que esta publicación te ayude a aprender flexbox al darte una herramienta que lo simplifica considerablemente.

Este gráfico muestra cómo funciona en pocas palabras. Lo revisaré más adelante. Pero quiero mencionar primero por qué es tan importante que envuelva ciertos componentes centrales RN en su propio código personalizado.

Este es solo un ejemplo de un componente empaquetado que me encanta usar y que tengo de código abierto. Pero encontrará más a menudo que necesita envolver el suyo. Lo explicaré.

He creado dos aplicaciones nativas de reacción publicadas, y después de refactorizar el último proyecto, he decidido que hay tres cosas que definitivamente debes envolver.

  1. Texto
  2. Tocable
  3. Ver

Para ser claros, envolver significa que importará y usará su propio componente de texto desde src en lugar del de RN. El tuyo lo envolverá.

Texto

Casi tiene que ajustar el texto por dos razones. Una razón es que no desea importar y declarar la misma fontFamily en cada componente de su aplicación. Desea establecer una fuente como predeterminada para todos los componentes de Texto o poder cambiar fácilmente de una fuente a otra.

Otra razón habla de un problema mayor que necesita comprender sobre React Native UI. FontSize es una cantidad de píxeles que aparecerá de manera diferente en diferentes dispositivos con diferentes resoluciones. Esto también es cierto sobre la altura, el ancho, el margen, el relleno y el posicionamiento absoluto. Es por eso que siempre debe tratar de usar flex para diseños cuando sea posible y, si no, considere usar getPixelSizeForLayoutSize cada vez que configure estas propiedades. Es un dolor, pero considera que es una razón para tratar de lograr todo con flexbox primero.

Sin embargo, para el texto, debe evitar configurar fontSize como un píxel de alguna manera. Solo te mostraré lo que uso, tomando prestado de esta publicación SO.

En esencia, envolver así es en realidad mapear accesorios a estilos. Algunos podrían considerarlo un antipatrón, pero el resultado es una herramienta maravillosa para el desarrollador con una mentalidad mínima. En lugar de importar texto desde "react-native", lo importaría desde "/components/Text.js" o donde sea que decida colocarlo.

Los accesorios expuestos deben cubrir la mayoría de tus estilos, por lo que es posible que no necesites crear una entrada de hoja de estilo.

Así es como lo uso. Está bastante limpio y sé cómo se verá este texto sin tener que hacer referencia a una hoja de estilo.

Tocable

Hay muchos módulos para envolver esto, aunque ninguno es demasiado popular, pero el punto esencial es que Touchable (NativeFeedback, etc.) se maneja de manera diferente tanto en iOS como en Android, por lo que no debería importar esto desde React Nativo. También puede encontrar muchas implementaciones de botones, pero tienden a tener estilos incorporados

Ver

Para View, sugeriría que revise mi componente react-native-row.

Decidí algo después de refactorizar la interfaz de usuario de mi última aplicación. Me di cuenta de que en lugar de encontrar elementos que fueran reutilizables y merecieran su propia declaración, en lugar de eso, estaba buscando escenas cuyos elementos no se usaran en otras escenas.

Pensé en otras formas de reducir el desorden. Recordé tener que configurar flexDirection: row cuando a menudo era la única propiedad para configurar. Comencé creando un contenedor alrededor de View para hacer precisamente eso. Pero luego noté tantas veces que solo había usado alignItems y justifyContents.

Es suficiente decir que terminé creando un contenedor que hizo algo que medio esperaba que hiciera. Hizo que mis declaraciones de hoja de estilo fueran innecesarias.

Comencemos con esta escena. Es una pantalla de administración de perfil. Aquí no hay componentes reutilizables además de los Botones y quizás el logotipo. Hay un componente ScrollView que realmente no planeo usar en ningún otro lugar de la aplicación.

Así que, esencialmente, el objetivo principal de esta página es organizar elementos, muchos de los cuales son texto.

Entonces, mirando el código de la parte superior de la página, puede ver una pequeña combinación de estilos en línea y uso de hojas de estilo. No es lo ideal, pero las ventajas de uno sobre uno nunca me han convencido de descartar uno u otro como cuestión de convención.

Cambié esto un poco, reconociendo el descuido y el uso incorrecto del estilo, pero cosas como estas sucedieron porque nunca llegué a una forma "mejor" de manejar estilos. Pero, ¿estamos realmente declarando "estilos" aquí de todos modos? Todo lo que está fuera de los estilos de texto realmente se refiere al diseño.

Me propuse eliminar la necesidad de preguntarnos dónde tratar con los estilos de diseño porque con flexbox, en realidad no son estilos. Flexbox merece su propio lugar fuera de los estilos porque es muy poderoso, pero a menudo mal entendido.

Mira lo que sucede cuando reemplazamos la asignación de diseño de flexbox con algo más intuitivo y conciso.

¿Suficientemente simple?

Nota sobre react-native-row: Row es una vista con flexDirection: 'row' y dial establece la posición de todos los componentes secundarios en la posición del número 5 en un dial de teléfono, y flex, utilizado aquí como booleano, establece el propiedad flex para 1.

Usando react-native-row y el componente de texto anterior, he movido todas las propiedades de flexbox completamente fuera del estilo y he hecho que mi escena sea más receptiva.

Pensamientos?

No soy un experto en React, pero he pasado un año con React Native y esto es lo que tiene sentido para mí. ¿Hay una mejor manera de implementar esto? Probablemente. ¿Es un antipatrón? Tal vez. Me encantaría escuchar lo que piensa la gente.