Alto y Ancho
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
La altura y el ancho de un componente determinan su tamaño en pantalla.
Dimensiones fijas
La forma general de establecer las dimensiones de un componente es añadiendo valores fijos de width y height en el estilo. Todas las dimensiones en React Native carecen de unidades y representan píxeles independientes de la densidad.
Este enfoque es común para componentes cuyo tamaño debe permanecer siempre fijo en puntos específicos, sin calcularse en función del tamaño de pantalla.
No existe una conversión universal de puntos a unidades físicas de medida. Esto significa que un componente con dimensiones fijas podría no tener el mismo tamaño físico en diferentes dispositivos y tamaños de pantalla. Sin embargo, esta diferencia suele ser imperceptible en la mayoría de casos prácticos.
Dimensiones flexibles
Usa flex en el estilo de un componente para que se expanda o reduzca dinámicamente según el espacio disponible. Normalmente usarás flex: 1, lo que indica al componente ocupar todo el espacio disponible, repartido equitativamente con otros componentes del mismo padre. Cuanto mayor sea el valor de flex, mayor será la proporción de espacio que ocupará el componente comparado con sus elementos hermanos.
Un componente solo puede expandirse para llenar el espacio disponible si su elemento padre tiene dimensiones mayores que 0. Si un padre no tiene ni un width/height fijos ni flex, sus dimensiones serán 0 y los hijos con flex no serán visibles.
Una vez controles el tamaño de un componente, el siguiente paso es aprender cómo organizarlo en pantalla.
Dimensiones porcentuales
Si necesitas ocupar una porción específica de la pantalla pero no deseas usar el diseño flex, puedes emplear valores porcentuales en el estilo del componente. Al igual que con las dimensiones flexibles, las dimensiones porcentuales requieren un elemento padre con tamaño definido.