Cuando se trata de diseñar una lista, por supuesto, podemos diseñar tanto los elementos de la lista como también la lista
misma.
Comencemos con los elementos y
aquí cortaré esa marca aquí, por así decirlo, para que el código jsx de un elemento y agregue una nueva
función fuera de la función componente porque realmente no necesitamos nada de dentro del componente
y solo nombraré este elemento de la lista de renderizado, el nombre depende de usted.
Es una función y esta función al final debería devolver algún código jsx aquí, por
lo que debería devolver este código jsx aquí y para funcionar correctamente, por supuesto, necesita obtener, digamos,
nuestro valor que queremos generar.
Entonces, aquí, usaré el valor como una clave y el valor de salida aquí entre las etiquetas de texto y ahora podemos
usar el elemento de la lista de renderizado allí donde
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
como un valor en un elemento de la lista de renderizado.
Ahora, si hacemos eso, deberíamos ver el mismo resultado que antes,
así que no hay nada demasiado lujoso aquí, pero ahora tenemos un marcado más ágil allí, un código
jsx más delgado allí y tenemos nuestro código jsx de elemento de lista aquí.
Ahora podemos diseñar esto y, por supuesto, quiero diseñar mi vista aquí, para esto agregaré un estilo aquí
desde la hoja de estilo que nombraré en la lista y allí, en realidad,
ahora quiero tener dos elementos de texto y uno debería ser el número de la
ronda y el
segundo debe ser el valor, así que aquí necesito un argumento adicional, necesito el valor pero también el número de la ronda
o numOfRound
como lo nombre aquí y quiero generar esto
dinámicamente aquí, tal vez con este símbolo hash delante por razones estilísticas.
Así que ahora tenemos estos dos textos en esta lista aquí y allá,
en realidad no quiero usar el texto sino el texto del cuerpo para tener mi estilo de texto predeterminado.
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
normal aquí en nuestro elemento de la lista. Con eso, estamos usando la fuente correcta y
ahora agreguemos ese objeto de lista a nuestra hoja de estilo para que podamos diseñar el elemento de la lista, en realidad, esto
debería llamarse elemento de la lista, por lo tanto, no lista.
Así que agreguemos un elemento de lista a
la hoja de estilo ahora, así y ahora, por supuesto,
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
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
de 10 para que tengamos algo de espacio
entre los elementos de la lista y no se sientan uno al lado del otro. Tal vez un color de fondo
blanco y, por
supuesto, puede usar diferentes colores aquí si lo desea.
Ahora que es un comienzo, ahora
cuando estamos configurando un color de borde, también tenemos que configurar el ancho del borde aquí,
aunque de
lo contrario no veremos un borde y lo estableceré en uno y muy importante, quiero tener estos dos componentes de texto en mi vista
se sientan uno al lado del otro y no uno encima del otro, lo que sería el predeterminado porque
una vista usa flexbox y usa una dirección de flexión predeterminada de la columna para que el elemento se coloque
uno al lado del otro en un eje horizontal, agregamos fila de dirección flexible aquí como esta.
Y con eso, si guardamos esto y la aplicación se reconstruye, probémoslo y veamos cómo se
ve, sí, eso se ve bien, pero aún hay margen de mejora.
Por ejemplo, quiero establecer un ancho en ese elemento de la lista para asegurarme de que no sea tan
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
si
hacemos eso y configuramos esto al 80%, verá que esto no se comporta de la manera que desea que se comporte
correctamente, así que esto sí no
se ve bien, ahora el
contenido se mueve de alguna manera, pero el elemento en sí no es más ancho. Para diseñar una lista correctamente, la mejor
manera es simplemente envolverla en una vista y luego diseñarla.
Entonces, aquí, podemos agregar
una vista, darle un estilo de lista, digamos,
así que aquí me refiero a la lista de estilos y agregar este objeto de lista a nuestra hoja de estilos ahora,
así y en esta lista, ahora podemos establecer un ancho del 80% y deshacerse del ancho aquí en el elemento de la lista.
Si hacemos esto con esta vista de ajuste, ahora verá que los elementos de la lista tienen el aspecto correcto y eso
es algo a tener en cuenta.
Si desea controlar el alto o el ancho de su lista, de su vista de desplazamiento, no agregue el estilo a los
elementos de la
lista, tampoco lo agregue necesariamente directamente a la vista de desplazamiento debido a cómo funciona internamente, pero en su
lugar, simplemente ajuste una vista alrededor de la vista de desplazamiento donde establezca el ancho y la altura deseados.
Ahora, lo que notará es que en el elemento de la lista, sería bueno si tuviéramos el número
redondo que se muestra allí y luego tuvimos algo de espacio entre el número redondo y nuestra suposición real
y para lograr esto, para uno necesitamos establecer
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
largo del eje principal que refleja la dirección como el eje horizontal y allí, usaré el espacio alrededor para
distribuir el espacio libre disponible alrededor de nuestro los elementos de texto aquí y ahora también generan el número de la ronda
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
un segundo argumento en esta función que el mapa llama automáticamente y ese es el índice del elemento que
estamos generando, por
lo que podríamos reenviar ese índice aquí para representar el elemento de lista o índice más 1, ya que comenzará en 0
y probablemente queremos imprimir uno para la primera ronda en lugar de 0.
Ahora con eso fuera del camino, si agregamos esto, ahora esto se ve un poco mejor y tal vez realmente cambiemos este aspecto
aquí de un espacio a otro, creo que se ve mejor, pero antes de guardar esto y
actualizar esto, También observe que un problema que tiene con eso es que el número redondo no es realmente
correcto.
La primera ronda es la más baja porque agregamos nuevas rondas al comienzo de la lista, por lo
tanto, el índice no es la medida correcta para el número de ruta porque el índice siempre es 0 o si sumamos 1,
es 1, para la primera lista pero el primer elemento de
la lista no es nuestra primera ronda, en cambio, dado que
agregamos nuevas rondas como el primer elemento de la lista, el primer elemento de la lista es nuestra última ronda
y ciertamente no la primera.
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
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
realidad el número redondo correcto para un elemento de lista dado.
Entonces, si hacemos eso y reiniciamos esto, ahora vemos que la ronda número uno es la conjetura siete y que sigue
siendo la número uno si
agregamos otra conjetura y ahora esto parece funcionar correctamente aquí.
También verá que tan pronto como superemos nuestros límites aquí, por supuesto, podemos desplazar la lista y eso
también parece funcionar de la manera que debería.
Probemos también esto en Android aquí, comencemos un nuevo juego allí y esperemos que no ganemos demasiado
pronto, sí, eso parece funcionar,
pero allí, en realidad no puedo desplazarme.
Entonces, en Android, esto en realidad no funciona correctamente, esta
lista no se puede desplazar allí.
Entonces, ¿qué hay de malo en Android?
Ahora, si bien se desplaza bien en iOS, para que
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,
así que agregue esto al estilo de
lista aquí, que es el estilo aplicado a la vista que se envuelve alrededor de la
vista de desplazamiento.
Con eso agregado, si ahora intentamos esto nuevamente en Android, ahora
notará que ahora esto se puede desplazar tan pronto como exceda los límites de la pantalla y en iOS,
aún debería funcionar como antes y, al ser
iOS, podemos incluso desplazarse sin que exceda los límites, ese
es solo el comportamiento predeterminado de iOS que puede equilibrar un poco tales listas.
Así que ahora tenemos esa lista desplazable aquí con vista de desplazamiento y mapa, y funciona tanto en Android como en
iOS.