1 00:00:02,320 --> 00:00:08,260 Cuando se trata de diseñar una lista, por supuesto, podemos diseñar tanto los elementos de la lista como también la lista 2 00:00:08,260 --> 00:00:08,810 misma. 3 00:00:08,840 --> 00:00:10,830 Comencemos con los elementos y 4 00:00:10,840 --> 00:00:17,440 aquí cortaré esa marca aquí, por así decirlo, para que el código jsx de un elemento y agregue una nueva 5 00:00:17,440 --> 00:00:22,420 función fuera de la función componente porque realmente no necesitamos nada de dentro del componente 6 00:00:22,420 --> 00:00:27,380 y solo nombraré este elemento de la lista de renderizado, el nombre depende de usted. 7 00:00:27,490 --> 00:00:33,850 Es una función y esta función al final debería devolver algún código jsx aquí, por 8 00:00:33,850 --> 00:00:41,320 lo que debería devolver este código jsx aquí y para funcionar correctamente, por supuesto, necesita obtener, digamos, 9 00:00:41,690 --> 00:00:44,320 nuestro valor que queremos generar. 10 00:00:44,320 --> 00:00:50,950 Entonces, aquí, usaré el valor como una clave y el valor de salida aquí entre las etiquetas de texto y ahora podemos 11 00:00:50,950 --> 00:00:54,240 usar el elemento de la lista de renderizado allí donde 12 00:00:54,250 --> 00:01:01,850 llamamos map y aquí, allí simplemente quiero ejecutar el elemento de la lista de renderizado para cada elemento que estamos mapeando y reenvío a eso 13 00:01:01,880 --> 00:01:05,410 como un valor en un elemento de la lista de renderizado. 14 00:01:05,440 --> 00:01:08,620 Ahora, si hacemos eso, deberíamos ver el mismo resultado que antes, 15 00:01:08,630 --> 00:01:13,720 así que no hay nada demasiado lujoso aquí, pero ahora tenemos un marcado más ágil allí, un código 16 00:01:13,730 --> 00:01:17,690 jsx más delgado allí y tenemos nuestro código jsx de elemento de lista aquí. 17 00:01:17,870 --> 00:01:23,930 Ahora podemos diseñar esto y, por supuesto, quiero diseñar mi vista aquí, para esto agregaré un estilo aquí 18 00:01:23,930 --> 00:01:28,640 desde la hoja de estilo que nombraré en la lista y allí, en realidad, 19 00:01:28,650 --> 00:01:33,600 ahora quiero tener dos elementos de texto y uno debería ser el número de la 20 00:01:33,600 --> 00:01:34,710 ronda y el 21 00:01:34,710 --> 00:01:41,940 segundo debe ser el valor, así que aquí necesito un argumento adicional, necesito el valor pero también el número de la ronda 22 00:01:41,940 --> 00:01:42,980 o numOfRound 23 00:01:43,080 --> 00:01:45,640 como lo nombre aquí y quiero generar esto 24 00:01:45,720 --> 00:01:49,800 dinámicamente aquí, tal vez con este símbolo hash delante por razones estilísticas. 25 00:01:50,250 --> 00:01:54,030 Así que ahora tenemos estos dos textos en esta lista aquí y allá, 26 00:01:54,030 --> 00:01:59,350 en realidad no quiero usar el texto sino el texto del cuerpo para tener mi estilo de texto predeterminado. 27 00:01:59,370 --> 00:02:06,030 Entonces, para eso, importemos el texto del cuerpo del texto del cuerpo de los componentes y usemos el texto del cuerpo en lugar del texto 28 00:02:06,030 --> 00:02:10,860 normal aquí en nuestro elemento de la lista. Con eso, estamos usando la fuente correcta y 29 00:02:10,860 --> 00:02:17,730 ahora agreguemos ese objeto de lista a nuestra hoja de estilo para que podamos diseñar el elemento de la lista, en realidad, esto 30 00:02:17,730 --> 00:02:21,040 debería llamarse elemento de la lista, por lo tanto, no lista. 31 00:02:21,040 --> 00:02:25,030 Así que agreguemos un elemento de lista a 32 00:02:25,390 --> 00:02:29,490 la hoja de estilo ahora, así y ahora, por supuesto, 33 00:02:29,860 --> 00:02:38,800 podemos diseñarlo de la forma que desee, lo diseñaré de una manera relativamente fácil aquí, solo dele un color de borde de 34 00:02:38,800 --> 00:02:47,080 digamos negro o tal vez esto ligero color grisáceo aquí. Un relleno en todas las direcciones de digamos 15 para tener algo de espacio, un margen en el eje vertical 35 00:02:47,500 --> 00:02:49,360 de 10 para que tengamos algo de espacio 36 00:02:49,360 --> 00:02:55,480 entre los elementos de la lista y no se sientan uno al lado del otro. Tal vez un color de fondo 37 00:02:55,480 --> 00:02:57,280 blanco y, por 38 00:02:57,280 --> 00:03:01,210 supuesto, puede usar diferentes colores aquí si lo desea. 39 00:03:01,290 --> 00:03:03,060 Ahora que es un comienzo, ahora 40 00:03:03,060 --> 00:03:07,650 cuando estamos configurando un color de borde, también tenemos que configurar el ancho del borde aquí, 41 00:03:07,650 --> 00:03:08,370 aunque de 42 00:03:08,370 --> 00:03:14,850 lo contrario no veremos un borde y lo estableceré en uno y muy importante, quiero tener estos dos componentes de texto en mi vista 43 00:03:14,850 --> 00:03:20,220 se sientan uno al lado del otro y no uno encima del otro, lo que sería el predeterminado porque 44 00:03:20,430 --> 00:03:25,830 una vista usa flexbox y usa una dirección de flexión predeterminada de la columna para que el elemento se coloque 45 00:03:25,830 --> 00:03:30,540 uno al lado del otro en un eje horizontal, agregamos fila de dirección flexible aquí como esta. 46 00:03:30,540 --> 00:03:35,990 Y con eso, si guardamos esto y la aplicación se reconstruye, probémoslo y veamos cómo se 47 00:03:36,030 --> 00:03:40,320 ve, sí, eso se ve bien, pero aún hay margen de mejora. 48 00:03:40,320 --> 00:03:46,320 Por ejemplo, quiero establecer un ancho en ese elemento de la lista para asegurarme de que no sea tan 49 00:03:46,350 --> 00:03:54,360 ancho como lo necesita su contenido, sino tan ancho como lo decimos. Ahora, para agregar un ancho, puede agregar ancho aquí para enumerar el elemento, pero 50 00:03:54,420 --> 00:03:54,940 si 51 00:03:55,020 --> 00:04:01,200 hacemos eso y configuramos esto al 80%, verá que esto no se comporta de la manera que desea que se comporte 52 00:04:01,200 --> 00:04:03,110 correctamente, así que esto sí no 53 00:04:03,110 --> 00:04:04,570 se ve bien, ahora el 54 00:04:04,680 --> 00:04:13,260 contenido se mueve de alguna manera, pero el elemento en sí no es más ancho. Para diseñar una lista correctamente, la mejor 55 00:04:13,260 --> 00:04:18,510 manera es simplemente envolverla en una vista y luego diseñarla. 56 00:04:18,510 --> 00:04:20,000 Entonces, aquí, podemos agregar 57 00:04:20,010 --> 00:04:22,290 una vista, darle un estilo de lista, digamos, 58 00:04:22,290 --> 00:04:29,130 así que aquí me refiero a la lista de estilos y agregar este objeto de lista a nuestra hoja de estilos ahora, 59 00:04:29,130 --> 00:04:36,240 así y en esta lista, ahora podemos establecer un ancho del 80% y deshacerse del ancho aquí en el elemento de la lista. 60 00:04:36,240 --> 00:04:41,880 Si hacemos esto con esta vista de ajuste, ahora verá que los elementos de la lista tienen el aspecto correcto y eso 61 00:04:41,880 --> 00:04:43,620 es algo a tener en cuenta. 62 00:04:43,740 --> 00:04:50,430 Si desea controlar el alto o el ancho de su lista, de su vista de desplazamiento, no agregue el estilo a los 63 00:04:50,430 --> 00:04:51,650 elementos de la 64 00:04:51,690 --> 00:04:57,450 lista, tampoco lo agregue necesariamente directamente a la vista de desplazamiento debido a cómo funciona internamente, pero en su 65 00:04:57,450 --> 00:05:03,250 lugar, simplemente ajuste una vista alrededor de la vista de desplazamiento donde establezca el ancho y la altura deseados. 66 00:05:03,290 --> 00:05:09,320 Ahora, lo que notará es que en el elemento de la lista, sería bueno si tuviéramos el número 67 00:05:09,360 --> 00:05:15,630 redondo que se muestra allí y luego tuvimos algo de espacio entre el número redondo y nuestra suposición real 68 00:05:15,630 --> 00:05:18,590 y para lograr esto, para uno necesitamos establecer 69 00:05:18,720 --> 00:05:26,670 un estilo aquí en el elemento de la lista, podemos establecer justifyContent que controla cómo se presenta el contenido de esta vista a lo 70 00:05:26,670 --> 00:05:33,070 largo del eje principal que refleja la dirección como el eje horizontal y allí, usaré el espacio alrededor para 71 00:05:33,210 --> 00:05:40,260 distribuir el espacio libre disponible alrededor de nuestro los elementos de texto aquí y ahora también generan el número de la ronda 72 00:05:40,260 --> 00:05:48,360 que esperamos como argumento aquí en el elemento de la lista de representación, podemos bajar a nuestra función de mapa y allí, en realidad obtenemos 73 00:05:48,360 --> 00:05:54,510 un segundo argumento en esta función que el mapa llama automáticamente y ese es el índice del elemento que 74 00:05:54,510 --> 00:05:55,680 estamos generando, por 75 00:05:55,680 --> 00:06:03,030 lo que podríamos reenviar ese índice aquí para representar el elemento de lista o índice más 1, ya que comenzará en 0 76 00:06:03,030 --> 00:06:07,560 y probablemente queremos imprimir uno para la primera ronda en lugar de 0. 77 00:06:07,560 --> 00:06:15,300 Ahora con eso fuera del camino, si agregamos esto, ahora esto se ve un poco mejor y tal vez realmente cambiemos este aspecto 78 00:06:15,300 --> 00:06:20,980 aquí de un espacio a otro, creo que se ve mejor, pero antes de guardar esto y 79 00:06:20,980 --> 00:06:27,390 actualizar esto, También observe que un problema que tiene con eso es que el número redondo no es realmente 80 00:06:27,390 --> 00:06:27,970 correcto. 81 00:06:28,020 --> 00:06:33,030 La primera ronda es la más baja porque agregamos nuevas rondas al comienzo de la lista, por lo 82 00:06:33,030 --> 00:06:39,390 tanto, el índice no es la medida correcta para el número de ruta porque el índice siempre es 0 o si sumamos 1, 83 00:06:39,450 --> 00:06:42,620 es 1, para la primera lista pero el primer elemento de 84 00:06:42,650 --> 00:06:45,700 la lista no es nuestra primera ronda, en cambio, dado que 85 00:06:45,780 --> 00:06:51,330 agregamos nuevas rondas como el primer elemento de la lista, el primer elemento de la lista es nuestra última ronda 86 00:06:51,330 --> 00:06:52,940 y ciertamente no la primera. 87 00:06:52,980 --> 00:07:02,670 Entonces, para solucionar eso, lo que podemos hacer es aquí en los elementos de la lista de renderizado, en lugar de usar el índice, por supuesto, podemos 88 00:07:02,880 --> 00:07:12,300 usar nuestra lista de conjeturas anteriores aquí y obtener la longitud de esa lista y luego deducir el índice de eso y eso nos da en 89 00:07:12,370 --> 00:07:16,810 realidad el número redondo correcto para un elemento de lista dado. 90 00:07:17,500 --> 00:07:24,310 Entonces, si hacemos eso y reiniciamos esto, ahora vemos que la ronda número uno es la conjetura siete y que sigue 91 00:07:24,310 --> 00:07:26,230 siendo la número uno si 92 00:07:26,260 --> 00:07:29,520 agregamos otra conjetura y ahora esto parece funcionar correctamente aquí. 93 00:07:29,560 --> 00:07:36,180 También verá que tan pronto como superemos nuestros límites aquí, por supuesto, podemos desplazar la lista y eso 94 00:07:36,310 --> 00:07:39,430 también parece funcionar de la manera que debería. 95 00:07:39,430 --> 00:07:48,280 Probemos también esto en Android aquí, comencemos un nuevo juego allí y esperemos que no ganemos demasiado 96 00:07:48,280 --> 00:07:51,000 pronto, sí, eso parece funcionar, 97 00:07:51,010 --> 00:07:54,640 pero allí, en realidad no puedo desplazarme. 98 00:07:54,640 --> 00:07:57,820 Entonces, en Android, esto en realidad no funciona correctamente, esta 99 00:07:57,820 --> 00:07:59,850 lista no se puede desplazar allí. 100 00:07:59,860 --> 00:08:01,320 Entonces, ¿qué hay de malo en Android? 101 00:08:01,510 --> 00:08:04,930 Ahora, si bien se desplaza bien en iOS, para que 102 00:08:04,930 --> 00:08:12,490 la vista de desplazamiento anidada en una vista también se desplace bien en Android, asegúrese de que la vista circundante realmente use flex one, 103 00:08:12,820 --> 00:08:15,080 así que agregue esto al estilo de 104 00:08:15,100 --> 00:08:20,320 lista aquí, que es el estilo aplicado a la vista que se envuelve alrededor de la 105 00:08:20,320 --> 00:08:21,570 vista de desplazamiento. 106 00:08:21,820 --> 00:08:25,120 Con eso agregado, si ahora intentamos esto nuevamente en Android, ahora 107 00:08:28,940 --> 00:08:34,700 notará que ahora esto se puede desplazar tan pronto como exceda los límites de la pantalla y en iOS, 108 00:08:34,700 --> 00:08:37,460 aún debería funcionar como antes y, al ser 109 00:08:37,580 --> 00:08:40,810 iOS, podemos incluso desplazarse sin que exceda los límites, ese 110 00:08:40,820 --> 00:08:45,090 es solo el comportamiento predeterminado de iOS que puede equilibrar un poco tales listas. 111 00:08:45,710 --> 00:08:51,800 Así que ahora tenemos esa lista desplazable aquí con vista de desplazamiento y mapa, y funciona tanto en Android como en 112 00:08:51,800 --> 00:08:52,310 iOS.