Ejercicio 1: MusicNative App – Styles
Temas del ejercicio
- Importación de dependencias
- Componente App.js
- Propiedad style de componentes
- Añadir estilos a los elementos
Descripción del ejercicio
En este ejercicio, aprenderemos sobre los componentes más comunes de la biblioteca de React. Para realizar este ejercicio, tendremos que crear una nueva aplicación a la cual llamaremos MusicNative, así que asegúrate de tener tu entorno en funcionamiento.
Tenemos varios componentes a nuestra disposición con react, pero los contenedores y el texto son los componentes más comunes y útiles para crear diseños u otros componentes. En esta ejercicio, veremos cómo usar contenedores y texto, pero lo más importante es que veremos cómo funcionan los estilos en React Native.
Crearemos una interfaz de usuario para un reproductor de música simple; no usaremos iconos por ahora, pero los añadiremos en un próximo ejercicio.
Desarrollo del ejercicio
En el archivo App.js, vamos a crear un componente sin estado. Este componente imitará a un pequeño reproductor de música. Por ahora, solo mostrará el nombre de la canción y una barra para mostrar el progreso.
1. El primer paso es importar nuestras dependencias
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
Incluimos las dependencias de nuestro componente. En este caso, usamos View, que es un contenedor. Si estás familiarizado con el desarrollo web, View es similar a div. Podríamos añadir más vistas dentro de otras vistas, textos, listas y cualquier otro componente personalizado que creemos o importemos de una biblioteca de terceros.
2. Una vez que hayamos importado las dependencias, podemos construir el componente:
export default class App extends React.Component {
render() {
const name = '01 - Blue Behind Green Bloches';
return (
<View style={styles.container}>
<View style={styles.innerContainer} />
<Text style={styles.title}>
<Text style={styles.subtitle}>Reproduciendo:</Text> {name}
</Text>
</View>
);
}
}
Como puede ver, este es un componente sin estado, es una función pura y no admite ninguno de los métodos del ciclo de vida.
Estamos definiendo una constante de nombre en el componente, pero en las aplicaciones del mundo real estos datos deben provenir de los props. En el return, estamos definiendo el XML de JavaScript (JSX) que vamos a necesitar para renderizar nuestro componente, junto con una referencia a los estilos.
Cada componente tiene una propiedad llamada style. Esta propiedad recibe un objeto con todos los estilos que queremos aplicar al componente dado. Los estilos no son heredados (excepto para el componente Texto) por los componentes secundarios, lo que significa que tenemos que establecer estilos individuales para cada componente.
3. Tenemos nuestro componente listo, así que ahora necesitamos añadir algunos estilos, para añadir colores y fuentes:
const styles = StyleSheet.create({
container: {
margin: 10,
marginTop: 100,
backgroundColor: '#6424CC',
borderRadius: 5,
},
innerContainer: {
backgroundColor: '#9954FF',
height: 50,
width: 150,
borderTopLeftRadius: 5,
borderBottomLeftRadius: 5,
},
title: {
fontSize: 18,
fontWeight: '200',
color: '#fff',
position: 'absolute',
backgroundColor: 'transparent',
top: 12,
left: 10,
},
subtitle: {
fontWeight: 'bold',
},
});
Lo que hicimos es que definimos los estilos para nuestro componente. Estamos utilizando la API de StyleSheet para crear todos nuestros estilos. Podríamos haber utilizado un objeto simple que contenga los estilos, pero al usar la API de StyleSheet en lugar de un objeto, obtenemos algunas optimizaciones de rendimiento, ya que los estilos se reutilizarán para cada render, en lugar de crear un objeto cada vez que se ejecute el método de renderizado.
En iOS, el texto tendrá un color de fondo morado y puede que no sea lo que realmente queremos que suceda en nuestra interfaz de usuario. Para solucionar esto, necesitamos establecer el color de fondo del texto como transparente. Pero la pregunta es, ¿por qué está pasando esto? La razón es que React Native añade algunas optimizaciones al texto estableciendo el color del color de fondo del padre. Esto mejorará el rendimiento del renderizado porque el motor de renderizado no tendrá que calcular los píxeles alrededor de cada letra del texto y el renderizado se ejecutará más rápido.
Importante: Piense cuidadosamente al establecer el color de fondo en transparente. Si el componente va a actualizar el contenido con mucha frecuencia, puede haber algunos problemas de rendimiento con el texto, especialmente si el texto es demasiado largo.
Fuentes
- https://reactnative.dev/docs/style
- https://ichi.pro/es/como-usar-componentes-con-estilo-en-react-native-58565259474053#:~:text=Configuraci%C3%B3n%20de%20componentes%20con%20estilo%20en%20React%20Native,Compatibilidad%20con%20TypeScript%20de%20componentes%20con%20estilo%20
