Cómo usar estilos en aplicaciones React Native

Introducción

Al trabajar con React Native, por defecto no utiliza HTML ni CSS como aplicación web.

De hecho, desde el primer momento, todo se diseña automáticamente según Flexbox .

En este artículo, aprenderá cómo aplicar estilos a las aplicaciones React Native.

Prerrequisitos

Si deseas seguir este artículo, necesitarás:

• Familiaridad con el uso de propiedades y valores CSS.
• Familiaridad con el uso de la sintaxis JSX en React Native.

UsandoStyleSheet

Lo primero que hay que saber sobre el estilo de React Native es utilizar el StyleSheetcomponente.

Primero, impórtalo así:

import { StyleSheet } from 'react-native';

Después de eso, puedes usarlo así:

const styles = StyleSheet.create({  container: {    height: 100  }})

Luego, agréguelo para darle estilo a su componente de manera adecuada, de la siguiente manera:

View style={styles.container}/View

También puedes tomar la ruta en línea, como la siguiente:

View style={{height: 100}}/View

Este código produciría el mismo resultado.

Manejo de píxeles

Es posible que hayas notado que no indicamos ninguna unidad en 100. height: 100Es posible que estés acostumbrado a escribir px, vm, etc. Y la pregunta es, ¿qué unidades se utilizan de forma predeterminada en React Native?

Se trata de una pregunta bastante compleja, cuya respuesta ha requerido más de un artículo. En el caso de iOS, son “puntos lógicos”, mientras que en Android se utiliza DIP. Hay muchas razones detrás de esto, así como la lógica de por qué se eligió este método. Hay muchos tamaños de pantalla y resoluciones diferentes en el mismo tamaño de pantalla. Por lo tanto, si utilizáramos píxeles normales, se vería pixelado en algunos teléfonos; pero la idea detrás de los “puntos” es hacer que las cosas se vean relativamente iguales en una pantalla de alta resolución y con una gran densidad de píxeles, que en una pantalla de baja resolución.

Aunque no es perfecto, se verá más o menos igual en todas las plataformas. Hay un cálculo que se realiza en segundo plano para determinar cómo se verían sus height, width, , etc. en la pantalla.borderWidth

También puedes usar 'auto'porcentajes, pero los pones entre comillas, así:

View style={{ height: '100%' }}/View

Este código producirá una altura completa View.

Envolviendo toda la pantalla

Ahora bien, algo que debes saber sobre la configuración Viewpara que ocupe toda la pantalla es que un teléfono como el iPhone X tiene parte de la pantalla cubierta con la interfaz de usuario (UI). Normalmente, la parte de la pantalla en la que colocas tus elementos estará oculta debajo de la parte cubierta de la pantalla.

Para ello, utiliza el componente React Native SafeAreaViewpara envolver el resto de tus componentes y podrás estar seguro de que verás toda la pantalla.

Alternativamente, puedes utilizar flex: 1.

React Native usa Flexbox de manera predeterminada, por lo que no tienes que preocuparte por aplicar display: flex. Y a diferencia de la versión web, que tiene flexDirectionestablecido en rowde manera predeterminada, React Native usa un flexDirectionconjunto en column. Establecer el estilo en flex: 1se aplicará flex-growal componente para ocupar todo el eje principal del contenedor Flexbox.

Ambos enfoques garantizarán que el contenido permanezca visible.

Agregar margen y relleno

En la web, puedes utilizar marginuna paddingabreviatura.

Sin embargo, React Native tiene ayudantes de estilo adicionales para aplicar márgenes y relleno.

Por ejemplo, para darle a un elemento un margen superior e inferior de 20, puedes configurarlo de esta manera:

View style={{marginVertical: 20}}/View

También puedes darle relleno en la parte superior e inferior:

View style={{paddingVertical: 20}}/View

Además de los ayudantes para “Vertical”, también hay ayudantes para “Horizontal”: paddingHorizontaly marginHorizontal.

También hay etiquetas de “Inicio” y “Fin” que puedes usar al final del margen y el relleno. Siempre que veas “Inicio” y “Fin” en los estilos, podrás saber que dependen del flexDirectioncontenedor.

Si el flexDirectiones rowentonces marginStartse comporta como marginLeft.

Si el flexDirectiones row-reverseentonces marginStartse comporta como marginRight.

Además, tenga en cuenta que “inicio” y “fin” anulan marginLefty marginRight, paddingLefty paddingRight.

Agregar sombras y bordes

El borderestilo normal en CSS no está disponible en los estilos de React Native. Debes dividirlo en borderColory borderWidth. Con esos dos indicados, tienes suficiente para un borde. Además, puedes elegir qué lado recibe qué color y ancho.

También existe borderRadius, como seguramente ya estés acostumbrado, que le da un radio a cada esquina. Puedes elegir cada radio individual con top-start, top-end, bottom-start, o bottom-end, de esta manera: borderTopStartRadius: 20, o puedes usar el más fácil top-left, top-right, y así sucesivamente.

Por último, puedes borderStyleelegir entre bordes discontinuos, punteados o sólidos.

En cuanto a las sombras en React Native, no utilizarás aquellas box-shadowcon las que quizás estés familiarizado.

En cambio, React Native tiene estilos que solo funcionan en iOS:

shadowOffset: { height: 3, width: 3 }, shadowColor: '#000000',shadowOpacity: 0.5,shadowRadius: 5

En versiones anteriores de Android, no existe una solución integrada con React Native. Puedes configurar la elevationpropiedad, pero no es personalizable y no funcionará bien con otros estilos, como bordery background-color.

Cómo manejar las diferencias entre plataformas

En la última sección, vimos la primera diferencia importante entre plataformas: una tiene estilos de sombra, pero la otra no. Lo bueno es que, en el ejemplo anterior, Android simplemente ignorará los estilos que no admite. No funcionará, pero al menos no recibirá ningún error. Esto es así en la mayoría de los casos con todos los estilos que no son compatibles con una plataforma: se ignorarán.

Sin embargo, encontrarás muchas diferencias en la apariencia de una plataforma a otra, incluso con estilos perfectos y limpios.

Para mantener el estilo similar en todas las plataformas, importemos el Platformcomponente desde React Native.

import { View, StyleSheet, Platform } from 'react-native';{/* ... */}View style={styles.container}/View{/* ... */}const styles = StyleSheet.create({  container: {    height: Platform.OS === 'android' ? 100 : 20,    backgroundColor: Platform.OS === 'ios' ? 'yellow' : 'blue',    ...Platform.select({ ios: { width: 100 } })  }})

Observe las dos formas diferentes de establecer estilos específicos de la plataforma. Una forma viene después de la stylepropiedad, utilizando un operador ternario:

height: Platform.OS === 'ios' ? 100, 20

Esto funciona bien en la mayoría de las situaciones, pero ¿qué pasa si ni siquiera quieres establecer un estilo en una plataforma? Ahí es donde ...Platform.select()entra en juego. Esto te permite especificar un estilo en una sola plataforma o en ambas:

...Platform.select({ ios { width: 100 }, android: { width: 75 } })

Este código definirá un widthpara 100las plataformas iOS y un widthpara 75las plataformas Android.

Conclusión

En este artículo, aprendiste a aplicar estilos a las aplicaciones React Native.

Notarás en React Native que los estilos son diferentes de un componente a otro, a diferencia de la web, donde básicamente cada elemento puede usar todos los estilos.

En la documentación oficial de React Native para la stylepropiedad del Textcomponente . No posee toda la amplitud de propiedades disponibles en la web. Y algunos componentes, como Button, ni siquiera tienen una stylepropiedad.

También puedes usar componentes como TouchableOpacity y, por supuesto, View, que tienen la mayoría de las propiedades de estilo disponibles. Alternativamente, también puedes importar la styled-componentsbiblioteca y usar CSS normal.