Ahora, por supuesto, aquí estoy usando una vista de desplazamiento y aprendiste que una lista plana es
mejor si tienes una lista donde no sabes cuántos elementos tendrás allí.
Ahora, para nuestro juego, una vista de desplazamiento estará bien porque sí, no sabemos cuántos elementos serán
y, en teoría, para adivinar muy mal, tendremos alrededor de 100 elementos allí, pero eso sucederá casi nunca y por lo tanto,
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
problema de rendimiento y el uso de una vista de desplazamiento aquí
está absolutamente bien porque sí, es una lista que contiene varios elementos, eso excederá los límites de nuestra
pantalla, pero rara vez será una lista con muchos elementos, nunca será una lista con más de 100
elementos debido a la forma en que funciona nuestro juego.
Entonces, la vista de desplazamiento estaría bien aquí, pero en caso de que aún desee usar una FlatList,
permítame mostrarle esto también.
Para eso, podemos agregar FlatList aquí y eso, por supuesto, significa que necesitamos importar FlatList desde
React
Native, así que aquí, importaré FlatList de esta manera y con
FlatList importado, aprendiste que FlatList toma un accesorio de datos que apunta al datos que desea alimentar y en
nuestro caso aquí, esa sería nuestra matriz de conjeturas
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í
que envíe el componentes para cada elemento en los datos y aquí puedo señalar el elemento
de la
lista de renderizado que debería llamarse. Ahora mismo, esto no
funcionará por un par de razones. Por un lado, el elemento de la lista de
renderizado espera dos valores, pero el elemento de renderizado aquí en FlatList solo reenviará un elemento y esos son los datos del elemento que
contienen información sobre el índice y sobre el elemento que estamos a punto de imprimir.
La otra cosa que nos causará problemas es la clave.
Quizás recuerde que FlatList espera obtener objetos en la matriz que está pasando, donde cada objeto tiene una
propiedad clave que puede extraer y usar como clave para una representación eficiente.
Ahora no tenemos una matriz de objetos aquí, tenemos una matriz de números y eso no va a funcionar.
Ahora podemos agregar un extractor de claves aquí a FlatList para anular su valor predeterminado, el extractor de claves toma una función
que obtiene nuestro elemento al final y luego tenemos que decirle a FlatList dónde encontrar nuestra clave y, de forma predeterminada,
busca el elemento. clave o para el artículo. id, aquí
queremos decirle que el artículo en sí es clave.
Ahora FlatList, sin embargo, quiere una clave que sea una cadena y no un número,
de lo contrario recibirá una advertencia.
Entonces, lo siguiente que tenemos que hacer es que las conjeturas anteriores que estamos manejando deben ser cadenas y eso no es un problema
porque de todas formas solo las estamos usando para imprimirlas en la pantalla, por lo que no
nos importa si son técnicamente almacenado como un número o como una cadena y, por lo tanto, aquí cuando
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
de cadena y hacer lo mismo para el valor inicial de curso. Aquí donde agrego mi conjetura inicial, llame a
toString allí también y ahora tenemos
cadenas y, por lo tanto, pueden usarse como números. Ahora, como dije, el elemento de la lista de renderizado
está esperando los argumentos incorrectos, numOfRound no funcionará así, el valor tampoco funcionará de esta manera, en
cambio estamos obteniendo los datos del
elemento y todavía podemos esperar un argumento adicional, Sin embargo, esto debe esperarse como el primer argumento porque ahora podemos simplemente bajar para
representar el elemento aquí en la lista plana y vincular los argumentos que se deben pasar, para que podamos agregar
argumentos adicionales además del argumento predeterminado que se pasará. Ahora bind espera que esto sea el primer argumento para que
establezcamos a qué debería referirse esto en la función que estamos llamando, no nos importa aquí, así que
solo lo
agregaré a esto, también podría establecerlo como nulo, no importa
El segundo argumento que agreguemos aquí será el primer argumento recibido por esa
función y ese debería ser nuestro número redondo que
debería ser pasadoGuesses. longitud. Anteriormente, deduje el índice aquí, pero eso ya
no funciona porque ya no tengo acceso
al índice, no estamos mapeando manualmente. Así que solo pasaré la
longitud allí y lo bueno es que puedo obtener el índice dentro del elemento de representación de los datos del elemento.
React también pasará este argumento predeterminado y el argumento predeterminado se pasará automáticamente al
último argumento.
Entonces, los primeros argumentos serán los argumentos que
establezca en enlace, en este
caso, ese es solo un argumento, nuestro número de rondas o nuestra longitud de la matriz y luego cualquier argumento predeterminado
que se hubiera pasado normalmente se agregará como argumentos adicionales al final de tu lista de argumentos aquí.
Ahora aquí, el número de rondas ya no
es un nombre apropiado, sino que es la longitud de la lista, eso suena como un mejor
nombre porque eso es lo que estamos obteniendo, pero luego aquí podemos calcular nuestro número de rondas usando
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
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
sí mismo que en nuestro caso es la suposición.
Ahora tampoco tenemos que agregar una clave aquí porque React Native realizará esa
incrustación gracias a FlatList. Eso fue mucho trabajo, ahora
deberíamos poder generar una lista nuevamente.
Así que guardemos esto y probémoslo
aquí y parece funcionar, sin
embargo, por supuesto, perdimos el posicionamiento ahora. Anteriormente, lo que hicimos fue agregar estilo de contenedor de contenido,
lista de estilos aquí a la vista de desplazamiento,
lo bueno es que también puede hacerlo en la FlatList. Si bien puede agregar un estilo como en la vista de
desplazamiento, este estilo le permite, por ejemplo, agregar un margen alrededor de la lista, pero no le permite alinear el contenido dentro
de la lista. Para eso, use
el estilo de contenedor de contenido que también es compatible con FlatList y, por lo tanto,
aquí también podemos apuntar a la lista de estilos y, por lo tanto, esto debería funcionar ahora como lo
hizo antes nuestra vista de desplazamiento.
Intentemos esto y verá que comenzamos en la parte inferior aquí y ahora podemos comenzar a agregar elementos.
Ahora veamos si el desplazamiento también funciona como debería,
sí, y podemos ver el último elemento y el elemento más antiguo, y sí,
hay algo mal con el posicionamiento de los elementos en el elemento de
la lista y volveré a esto, pero En general, esto funciona. También probémoslo en Android, así que
comencemos a adivinar
y esperamos no resolver esto demasiado pronto, no, eso funciona
y
aquí, también podemos desplazarnos como pueden ver. Entonces, eso también funciona con la FlatList,
¿qué pasa con esta extraña distribución de contenido aquí en nuestros elementos de la lista?
Bueno, notará que los elementos de la lista son más grandes que antes.
Sin embargo, el contenido se distribuye como si el elemento de la lista terminara aquí y ese es realmente el problema.
Tenemos un ancho del 60% del elemento de la lista y nuestro contenido lo respeta, pero nuestros
bordes, curiosamente, no.
Para corregir este extraño comportamiento de FlatList, lo que puede hacer es ir al contenedor de la lista
que contiene la lista general y establecer el ancho allí al ancho de la lista deseada al final, como digamos 60%
y darle un ancho a los elementos de la lista del 100%
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
el mismo ancho, y dado que
rara vez tiene que usar el caso en el que su contenedor de la lista debe ser más ancho que los
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.
Ahora, si haces eso, notarás que el ancho se ve mejor, pero en realidad, el posicionamiento ahora es un problema.
Bueno, ya que ahora tenemos el ancho controlado en el contenedor de la lista externa, podemos deshacernos de
alinear los elementos centrados aquí en la lista misma, por lo
que la lista, no lo olvide, fue el estilo agregado al estilo del contenedor de contenido.
Mantenemos el estilo allí, pero eliminé alinear elementos al centro porque no hay nada que
centrar ahora, tenemos el ancho establecido en el contenedor de la lista,
no en los elementos de la lista, por lo que gracias a que tienen 100%, se centran automáticamente porque toman de
todos modos, por lo tanto, ahora, si intentamos
esto de nuevo, parece que funciona mucho mejor y los elementos de la lista se presentan de la manera en que deberían ser.
Entonces, si tenemos otro por aquí que tal vez tarde un poco más, sí, se ve bien,
entonces aquí podemos ver que tenemos el mismo comportamiento que antes, obtenemos el estilo agradable y también trabajamos en torno
a ese comportamiento diferente que FlatList nos da. Probemos también esto en Android aquí y comencemos un
nuevo juego allí, oh,
este no será un juego
largo, lo
suficiente, por lo que también todo funciona como debería.
Y así es como podría hacer esto con FlatList, como ve que funciona de manera un poco diferente, tenemos
que evitar su comportamiento diferente cuando
se trata de ajustar el ancho de los elementos de la lista, pero al final, en última instancia, esto
ahora también funciona y por lo tanto, ahora aprendió a diseñar sus cosas con FlatList, con vista de desplazamiento, lo que
tiene de especial estas vistas de lista o esas vistas desplazables en general y cómo puede diseñar sus cosas de la manera
que desee.