1 00:00:02,310 --> 00:00:08,520 Así que vamos a diseñar estos componentes allí y para eso, queremos aplicar algo de estilo a los componentes de texto. 2 00:00:09,120 --> 00:00:12,780 El componente de texto de hecho admite la propiedad de estilo, como 3 00:00:12,780 --> 00:00:19,680 puede verificar en los documentos oficiales, pero el componente de texto admite menos características de estilo que la vista y, por lo tanto, 4 00:00:19,710 --> 00:00:20,610 lo envolveré 5 00:00:20,970 --> 00:00:26,030 en otro componente de vista y ese es solo el componente de vista que están importando 6 00:00:26,040 --> 00:00:31,560 desde React Native, esa es también la parte que quise decir con usted, solo tiene un par de 7 00:00:31,560 --> 00:00:36,960 componentes básicos, pero lo llevarán muy lejos porque trabaja con vistas, botones y textos todo el tiempo. 8 00:00:37,530 --> 00:00:44,730 Así que aquí envolveré este texto con el componente de vista de apertura y cierre aquí y ahora aquí, tenemos más 9 00:00:44,730 --> 00:00:46,090 opciones de estilo. 10 00:00:46,290 --> 00:00:50,730 Ahora, de nuevo, no elegiré estilos en línea aquí, sino que agregaré 11 00:00:50,730 --> 00:00:54,000 estilos a la hoja de estilos, por 12 00:00:54,210 --> 00:01:03,810 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, 13 00:01:03,810 --> 00:01:17,750 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 14 00:01:17,880 --> 00:01:25,720 como un estilo a esta vista haciendo referencia a estilos. listItem aquí y con eso si guardamos 15 00:01:25,770 --> 00:01:34,380 esto, ahora nuestro elemento de lista debería verse un poco mejor, aprenda React Native, así 16 00:01:34,610 --> 00:01:39,620 es como se ve. Ahora, un poco de espacio probablemente también sería 17 00:01:39,620 --> 00:01:46,850 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 18 00:01:46,850 --> 00:01:49,270 contenido circundante, por lo que los otros 19 00:01:49,280 --> 00:01:55,130 elementos a su alrededor y allí, podríamos agregar margen 10 para agregar un margen en todas las direcciones, también podríamos 20 00:01:55,460 --> 00:01:59,600 agregar un margen en la parte superior o solo en la parte inferior o, 21 00:01:59,720 --> 00:02:06,050 y eso es algo que no existe en CSS, puede agregar un margen vertical de 10 para tener un margen en 22 00:02:06,050 --> 00:02:08,560 la parte superior y abajo pero no a izquierda 23 00:02:08,720 --> 00:02:15,770 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 24 00:02:15,860 --> 00:02:23,210 sería una propiedad que tienes en CSS, lo tienes en React Native. Entonces, si ahora guardamos eso 25 00:02:23,210 --> 00:02:29,840 y agregamos aprender React Native aquí, ahora verá que hay algún 26 00:02:30,030 --> 00:02:38,430 espacio entre esos elementos y, por supuesto, también en iOS si lo hacemos allí. 27 00:02:38,550 --> 00:02:46,440 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 28 00:02:46,440 --> 00:02:51,050 en el estilo y todo lo que puede hacer más adelante en este curso, solo 29 00:02:51,060 --> 00:02:54,090 tenemos que obtener Hay paso a paso, por supuesto. 30 00:02:54,090 --> 00:03:00,750 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 31 00:03:00,750 --> 00:03:01,460 el elemento 32 00:03:01,500 --> 00:03:05,730 que está repitiendo y ya no solo repetimos el texto, sino que ahora estamos repitiendo la 33 00:03:05,730 --> 00:03:07,020 vista completa, por lo que 34 00:03:07,320 --> 00:03:14,430 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 35 00:03:14,430 --> 00:03:15,520 con la tecla 36 00:03:15,600 --> 00:03:19,230 movida a la vista en lugar del texto, esto debería desaparecer.