Así que vamos a diseñar estos componentes allí y para eso, queremos aplicar algo de estilo a los componentes de texto.
El componente de texto de hecho admite la propiedad de estilo, como
puede verificar en los documentos oficiales, pero el componente de texto admite menos características de estilo que la vista y, por lo tanto,
lo envolveré
en otro componente de vista y ese es solo el componente de vista que están importando
desde React Native, esa es también la parte que quise decir con usted, solo tiene un par de
componentes básicos, pero lo llevarán muy lejos porque trabaja con vistas, botones y textos todo el tiempo.
Así que aquí envolveré este texto con el componente de vista de apertura y cierre aquí y ahora aquí, tenemos más
opciones de estilo.
Ahora, de nuevo, no elegiré estilos en línea aquí, sino que agregaré
estilos a la hoja de estilos, por
ejemplo, podríamos nombrar este elemento de la lista, pero el nombre depende de usted y digamos aquí que queremos tener un relleno de 10,
tal vez demos Es un color de fondo de este código hexadecimal gris aquí, asígnele un color de borde negro y también un ancho de borde de uno y ahora asignemos un elemento de lista
como un estilo a esta vista haciendo referencia a estilos. listItem aquí y con eso si guardamos
esto, ahora nuestro elemento de lista debería verse un poco mejor, aprenda React Native, así
es como se ve. Ahora, un poco de espacio probablemente también sería
bueno, podemos lograrlo con el margen, el relleno está espaciado entre el borde y el contenido, el margen está espaciado entre el borde y el
contenido circundante, por lo que los otros
elementos a su alrededor y allí, podríamos agregar margen 10 para agregar un margen en todas las direcciones, también podríamos
agregar un margen en la parte superior o solo en la parte inferior o,
y eso es algo que no existe en CSS, puede agregar un margen vertical de 10 para tener un margen en
la parte superior y abajo pero no a izquierda
y derecha y ese es un ejemplo de cómo esto se basa en CSS pero no es lo mismo porque el margen vertical no
sería una propiedad que tienes en CSS, lo tienes en React Native. Entonces, si ahora guardamos eso
y agregamos aprender React Native aquí, ahora verá que hay algún
espacio entre esos elementos y, por supuesto, también en iOS si lo hacemos allí.
Entonces esto ahora agrega nuestros artículos y, aunque probablemente aún no ganemos un premio de belleza, al menos es un buen comienzo y profundizaremos mucho
en el estilo y todo lo que puede hacer más adelante en este curso, solo
tenemos que obtener Hay paso a paso, por supuesto.
Ahora, una cosa que tenemos que ajustar ahora, por cierto, la clave aquí siempre debe estar en el elemento raíz de su lista, por lo que
el elemento
que está repitiendo y ya no solo repetimos el texto, sino que ahora estamos repitiendo la
vista completa, por lo que
la clave debe agregarse a la vista aquí, no al texto en la vista. Es por eso que recibí esta advertencia, este error nuevamente, ahora
con la tecla
movida a la vista en lugar del texto, esto debería desaparecer.