1 00:00:02,180 --> 00:00:06,770 Ahora, por supuesto, aquí estoy usando una vista de desplazamiento y aprendiste que una lista plana es 2 00:00:06,770 --> 00:00:10,160 mejor si tienes una lista donde no sabes cuántos elementos tendrás allí. 3 00:00:10,190 --> 00:00:16,490 Ahora, para nuestro juego, una vista de desplazamiento estará bien porque sí, no sabemos cuántos elementos serán 4 00:00:16,490 --> 00:00:24,320 y, en teoría, para adivinar muy mal, tendremos alrededor de 100 elementos allí, pero eso sucederá casi nunca y por lo tanto, 5 00:00:24,380 --> 00:00:34,020 por lo general, esta lista no contendrá más de 10, 15, 20 como máximo, y por lo tanto, es muy probable que esto nunca nos cause ningún 6 00:00:34,110 --> 00:00:38,480 problema de rendimiento y el uso de una vista de desplazamiento aquí 7 00:00:38,520 --> 00:00:45,210 está absolutamente bien porque sí, es una lista que contiene varios elementos, eso excederá los límites de nuestra 8 00:00:45,450 --> 00:00:52,140 pantalla, pero rara vez será una lista con muchos elementos, nunca será una lista con más de 100 9 00:00:52,140 --> 00:00:56,370 elementos debido a la forma en que funciona nuestro juego. 10 00:00:56,370 --> 00:01:01,770 Entonces, la vista de desplazamiento estaría bien aquí, pero en caso de que aún desee usar una FlatList, 11 00:01:01,800 --> 00:01:03,050 permítame mostrarle esto también. 12 00:01:03,060 --> 00:01:08,460 Para eso, podemos agregar FlatList aquí y eso, por supuesto, significa que necesitamos importar FlatList desde 13 00:01:08,460 --> 00:01:08,910 React 14 00:01:09,390 --> 00:01:13,020 Native, así que aquí, importaré FlatList de esta manera y con 15 00:01:13,020 --> 00:01:19,590 FlatList importado, aprendiste que FlatList toma un accesorio de datos que apunta al datos que desea alimentar y en 16 00:01:19,670 --> 00:01:22,630 nuestro caso aquí, esa sería nuestra matriz de conjeturas 17 00:01:22,680 --> 00:01:31,710 anteriores y que luego tiene un accesorio de renderizado de elementos que le permite generar los elementos para cada elemento en los datos que está ingresando, así 18 00:01:31,860 --> 00:01:37,350 que envíe el componentes para cada elemento en los datos y aquí puedo señalar el elemento 19 00:01:37,350 --> 00:01:38,250 de la 20 00:01:38,250 --> 00:01:42,870 lista de renderizado que debería llamarse. Ahora mismo, esto no 21 00:01:42,870 --> 00:01:48,390 funcionará por un par de razones. Por un lado, el elemento de la lista de 22 00:01:48,750 --> 00:01:55,620 renderizado espera dos valores, pero el elemento de renderizado aquí en FlatList solo reenviará un elemento y esos son los datos del elemento que 23 00:01:55,620 --> 00:01:59,950 contienen información sobre el índice y sobre el elemento que estamos a punto de imprimir. 24 00:01:59,970 --> 00:02:03,510 La otra cosa que nos causará problemas es la clave. 25 00:02:03,540 --> 00:02:10,710 Quizás recuerde que FlatList espera obtener objetos en la matriz que está pasando, donde cada objeto tiene una 26 00:02:10,740 --> 00:02:16,130 propiedad clave que puede extraer y usar como clave para una representación eficiente. 27 00:02:16,140 --> 00:02:21,880 Ahora no tenemos una matriz de objetos aquí, tenemos una matriz de números y eso no va a funcionar. 28 00:02:21,960 --> 00:02:28,680 Ahora podemos agregar un extractor de claves aquí a FlatList para anular su valor predeterminado, el extractor de claves toma una función 29 00:02:28,770 --> 00:02:35,070 que obtiene nuestro elemento al final y luego tenemos que decirle a FlatList dónde encontrar nuestra clave y, de forma predeterminada, 30 00:02:35,070 --> 00:02:38,170 busca el elemento. clave o para el artículo. id, aquí 31 00:02:38,280 --> 00:02:41,860 queremos decirle que el artículo en sí es clave. 32 00:02:42,090 --> 00:02:46,580 Ahora FlatList, sin embargo, quiere una clave que sea una cadena y no un número, 33 00:02:46,590 --> 00:02:48,510 de lo contrario recibirá una advertencia. 34 00:02:48,510 --> 00:02:54,480 Entonces, lo siguiente que tenemos que hacer es que las conjeturas anteriores que estamos manejando deben ser cadenas y eso no es un problema 35 00:02:54,480 --> 00:02:58,800 porque de todas formas solo las estamos usando para imprimirlas en la pantalla, por lo que no 36 00:02:58,800 --> 00:03:03,750 nos importa si son técnicamente almacenado como un número o como una cadena y, por lo tanto, aquí cuando 37 00:03:03,750 --> 00:03:09,630 agregamos una nueva suposición, simplemente podemos llamar a toString, que es un método Javascript incorporado en el número para convertirlo en un tipo 38 00:03:09,630 --> 00:03:16,490 de cadena y hacer lo mismo para el valor inicial de curso. Aquí donde agrego mi conjetura inicial, llame a 39 00:03:16,500 --> 00:03:19,140 toString allí también y ahora tenemos 40 00:03:19,140 --> 00:03:26,030 cadenas y, por lo tanto, pueden usarse como números. Ahora, como dije, el elemento de la lista de renderizado 41 00:03:26,030 --> 00:03:31,940 está esperando los argumentos incorrectos, numOfRound no funcionará así, el valor tampoco funcionará de esta manera, en 42 00:03:31,940 --> 00:03:34,430 cambio estamos obteniendo los datos del 43 00:03:34,550 --> 00:03:42,440 elemento y todavía podemos esperar un argumento adicional, Sin embargo, esto debe esperarse como el primer argumento porque ahora podemos simplemente bajar para 44 00:03:42,740 --> 00:03:49,280 representar el elemento aquí en la lista plana y vincular los argumentos que se deben pasar, para que podamos agregar 45 00:03:49,460 --> 00:03:55,330 argumentos adicionales además del argumento predeterminado que se pasará. Ahora bind espera que esto sea el primer argumento para que 46 00:03:55,350 --> 00:04:00,210 establezcamos a qué debería referirse esto en la función que estamos llamando, no nos importa aquí, así que 47 00:04:00,210 --> 00:04:00,920 solo lo 48 00:04:00,920 --> 00:04:03,720 agregaré a esto, también podría establecerlo como nulo, no importa 49 00:04:03,750 --> 00:04:10,350 El segundo argumento que agreguemos aquí será el primer argumento recibido por esa 50 00:04:10,350 --> 00:04:14,830 función y ese debería ser nuestro número redondo que 51 00:04:14,860 --> 00:04:21,510 debería ser pasadoGuesses. longitud. Anteriormente, deduje el índice aquí, pero eso ya 52 00:04:21,510 --> 00:04:23,640 no funciona porque ya no tengo acceso 53 00:04:23,640 --> 00:04:27,430 al índice, no estamos mapeando manualmente. Así que solo pasaré la 54 00:04:27,700 --> 00:04:34,170 longitud allí y lo bueno es que puedo obtener el índice dentro del elemento de representación de los datos del elemento. 55 00:04:34,170 --> 00:04:39,780 React también pasará este argumento predeterminado y el argumento predeterminado se pasará automáticamente al 56 00:04:39,840 --> 00:04:40,960 último argumento. 57 00:04:41,010 --> 00:04:43,890 Entonces, los primeros argumentos serán los argumentos que 58 00:04:43,890 --> 00:04:45,840 establezca en enlace, en este 59 00:04:45,830 --> 00:04:52,620 caso, ese es solo un argumento, nuestro número de rondas o nuestra longitud de la matriz y luego cualquier argumento predeterminado 60 00:04:52,620 --> 00:04:58,500 que se hubiera pasado normalmente se agregará como argumentos adicionales al final de tu lista de argumentos aquí. 61 00:04:58,500 --> 00:05:01,500 Ahora aquí, el número de rondas ya no 62 00:05:01,500 --> 00:05:07,530 es un nombre apropiado, sino que es la longitud de la lista, eso suena como un mejor 63 00:05:07,580 --> 00:05:13,970 nombre porque eso es lo que estamos obteniendo, pero luego aquí podemos calcular nuestro número de rondas usando 64 00:05:13,970 --> 00:05:20,120 la longitud de la lista y luego deduciendo itemData. index porque los datos del elemento que obtiene React Native automáticamente son un objeto que 65 00:05:20,120 --> 00:05:27,440 también tiene una propiedad index que es el índice del elemento que está generando y también obtiene itemData. artículo y ese es el artículo en 66 00:05:27,920 --> 00:05:31,740 sí mismo que en nuestro caso es la suposición. 67 00:05:32,000 --> 00:05:37,700 Ahora tampoco tenemos que agregar una clave aquí porque React Native realizará esa 68 00:05:37,700 --> 00:05:41,740 incrustación gracias a FlatList. Eso fue mucho trabajo, ahora 69 00:05:41,750 --> 00:05:43,940 deberíamos poder generar una lista nuevamente. 70 00:05:43,940 --> 00:05:46,590 Así que guardemos esto y probémoslo 71 00:05:46,590 --> 00:05:48,860 aquí y parece funcionar, sin 72 00:05:49,320 --> 00:05:55,440 embargo, por supuesto, perdimos el posicionamiento ahora. Anteriormente, lo que hicimos fue agregar estilo de contenedor de contenido, 73 00:05:55,440 --> 00:05:58,300 lista de estilos aquí a la vista de desplazamiento, 74 00:05:58,320 --> 00:06:04,200 lo bueno es que también puede hacerlo en la FlatList. Si bien puede agregar un estilo como en la vista de 75 00:06:04,200 --> 00:06:10,320 desplazamiento, este estilo le permite, por ejemplo, agregar un margen alrededor de la lista, pero no le permite alinear el contenido dentro 76 00:06:10,320 --> 00:06:12,510 de la lista. Para eso, use 77 00:06:12,510 --> 00:06:16,900 el estilo de contenedor de contenido que también es compatible con FlatList y, por lo tanto, 78 00:06:16,980 --> 00:06:22,200 aquí también podemos apuntar a la lista de estilos y, por lo tanto, esto debería funcionar ahora como lo 79 00:06:22,200 --> 00:06:23,750 hizo antes nuestra vista de desplazamiento. 80 00:06:23,760 --> 00:06:32,650 Intentemos esto y verá que comenzamos en la parte inferior aquí y ahora podemos comenzar a agregar elementos. 81 00:06:32,650 --> 00:06:35,390 Ahora veamos si el desplazamiento también funciona como debería, 82 00:06:36,050 --> 00:06:39,820 sí, y podemos ver el último elemento y el elemento más antiguo, y sí, 83 00:06:39,950 --> 00:06:43,400 hay algo mal con el posicionamiento de los elementos en el elemento de 84 00:06:43,420 --> 00:06:49,010 la lista y volveré a esto, pero En general, esto funciona. También probémoslo en Android, así que 85 00:06:49,010 --> 00:06:50,130 comencemos a adivinar 86 00:06:50,150 --> 00:06:54,610 y esperamos no resolver esto demasiado pronto, no, eso funciona 87 00:06:54,630 --> 00:06:55,740 y 88 00:06:55,740 --> 00:07:02,200 aquí, también podemos desplazarnos como pueden ver. Entonces, eso también funciona con la FlatList, 89 00:07:02,200 --> 00:07:08,160 ¿qué pasa con esta extraña distribución de contenido aquí en nuestros elementos de la lista? 90 00:07:08,170 --> 00:07:15,070 Bueno, notará que los elementos de la lista son más grandes que antes. 91 00:07:15,160 --> 00:07:21,010 Sin embargo, el contenido se distribuye como si el elemento de la lista terminara aquí y ese es realmente el problema. 92 00:07:21,010 --> 00:07:27,910 Tenemos un ancho del 60% del elemento de la lista y nuestro contenido lo respeta, pero nuestros 93 00:07:27,910 --> 00:07:29,510 bordes, curiosamente, no. 94 00:07:29,590 --> 00:07:34,870 Para corregir este extraño comportamiento de FlatList, lo que puede hacer es ir al contenedor de la lista 95 00:07:34,870 --> 00:07:41,110 que contiene la lista general y establecer el ancho allí al ancho de la lista deseada al final, como digamos 60% 96 00:07:41,860 --> 00:07:45,810 y darle un ancho a los elementos de la lista del 100% 97 00:07:45,820 --> 00:07:52,300 Entonces, el contenedor de la lista en general es más pequeño, es menos ancho y, por lo tanto, los elementos de la lista asumen ese ancho y tienen 98 00:07:52,300 --> 00:07:53,850 el mismo ancho, y dado que 99 00:07:53,950 --> 00:07:58,840 rara vez tiene que usar el caso en el que su contenedor de la lista debe ser más ancho que los 100 00:07:59,230 --> 00:08:04,150 elementos de la lista porque, ¿qué otra cosa sería? allí en el contenedor de la lista, esa debería ser una buena solución. 101 00:08:04,180 --> 00:08:11,300 Ahora, si haces eso, notarás que el ancho se ve mejor, pero en realidad, el posicionamiento ahora es un problema. 102 00:08:11,320 --> 00:08:17,080 Bueno, ya que ahora tenemos el ancho controlado en el contenedor de la lista externa, podemos deshacernos de 103 00:08:17,080 --> 00:08:20,740 alinear los elementos centrados aquí en la lista misma, por lo 104 00:08:20,740 --> 00:08:25,760 que la lista, no lo olvide, fue el estilo agregado al estilo del contenedor de contenido. 105 00:08:25,810 --> 00:08:30,810 Mantenemos el estilo allí, pero eliminé alinear elementos al centro porque no hay nada que 106 00:08:31,060 --> 00:08:35,050 centrar ahora, tenemos el ancho establecido en el contenedor de la lista, 107 00:08:35,050 --> 00:08:41,890 no en los elementos de la lista, por lo que gracias a que tienen 100%, se centran automáticamente porque toman de 108 00:08:41,890 --> 00:08:45,070 todos modos, por lo tanto, ahora, si intentamos 109 00:08:45,070 --> 00:08:52,420 esto de nuevo, parece que funciona mucho mejor y los elementos de la lista se presentan de la manera en que deberían ser. 110 00:08:52,420 --> 00:08:57,940 Entonces, si tenemos otro por aquí que tal vez tarde un poco más, sí, se ve bien, 111 00:08:57,940 --> 00:09:04,230 entonces aquí podemos ver que tenemos el mismo comportamiento que antes, obtenemos el estilo agradable y también trabajamos en torno 112 00:09:04,240 --> 00:09:09,760 a ese comportamiento diferente que FlatList nos da. Probemos también esto en Android aquí y comencemos un 113 00:09:09,760 --> 00:09:10,930 nuevo juego allí, oh, 114 00:09:12,670 --> 00:09:14,290 este no será un juego 115 00:09:16,120 --> 00:09:17,020 largo, lo 116 00:09:17,020 --> 00:09:19,800 suficiente, por lo que también todo funciona como debería. 117 00:09:19,960 --> 00:09:25,780 Y así es como podría hacer esto con FlatList, como ve que funciona de manera un poco diferente, tenemos 118 00:09:25,780 --> 00:09:27,600 que evitar su comportamiento diferente cuando 119 00:09:27,610 --> 00:09:33,550 se trata de ajustar el ancho de los elementos de la lista, pero al final, en última instancia, esto 120 00:09:34,090 --> 00:09:40,330 ahora también funciona y por lo tanto, ahora aprendió a diseñar sus cosas con FlatList, con vista de desplazamiento, lo que 121 00:09:40,330 --> 00:09:46,990 tiene de especial estas vistas de lista o esas vistas desplazables en general y cómo puede diseñar sus cosas de la manera 122 00:09:46,990 --> 00:09:47,970 que desee.