React Native Section List: Agregando elementos en la parte superior de la lista cambia lo que actualmente está en vista.
Estamos utilizando una Lista de Secciones para mostrar una gran cantidad de datos, en cada elemento se ordena por fecha. La parte superior de la lista muestra datos en el pasado, mientras que la parte inferior de la lista muestra datos en el futuro. En general, el usuario generalmente (si no siempre) verá datos alrededor del centro de la lista.
Actualmente estoy lidiando con un problema al agregar elementos a la lista, o al eliminar elementos de la lista. Si estos elementos se agregan/eliminan por encima de la vista donde el usuario está mirando (por ejemplo, hacia la parte superior de la lista), esto hace que el tamaño de la lista de secciones cambie y empuje los elementos que el usuario está viendo actualmente hacia abajo o hacia arriba dependiendo de si se agregan o eliminan elementos. Así que de repente, el usuario está viendo datos completamente diferentes.
He pensado en una forma de abordar este problema:
- Registrar la posición vertical de la lista mientras el usuario se desplaza (utilizando
event.nativeEvent.contentOffset.yen el métodoonScroll). - Calcular el tamaño de la lista de secciones.
- Almacenar el tamaño anterior de la lista de secciones.
- Cuando el tamaño anterior no es igual al tamaño actual: esto indica que se han agregado o eliminado elementos. Determinar si la lista ha crecido o disminuido y calcular la diferencia en píxeles para desplazar al usuario a la ubicación donde estaba mirando anteriormente.
Sin embargo, la API de la Lista de Secciones no proporciona un método para desplazarse a una posición específica utilizando solo píxeles. Solo veo un método scrollToLocation, que toma el índice de la lista de secciones, el índice del elemento y permite especificar un desplazamiento para desplazarse hacia.
En principio, podría seguir la sección y el índice del elemento que el usuario está viendo, y también calcular y seguir la diferencia entre la ubicación de la sección/elemento y la posición Y de la vista para obtener un desplazamiento más preciso al volver al lugar anterior.
Me preguntaba si alguien más ha enfrentado el mismo problema y si hay formas más fáciles de abordar este problema.
Se agradecerán cualquier sugerencia, gracias.
davy.ai
Tratando con un cambio de tamaño en una Lista de secciones
Como experto en TI especializado en react-native y react-native-sectionlist, es posible que te encuentres con un problema al tratar con una Lista de secciones que muestra una gran cantidad de datos. Puedes notar que cuando se agregan o se eliminan elementos de la lista, esto causa que el tamaño de la lista de secciones cambie, empujando los elementos que el usuario está viendo actualmente hacia abajo o hacia arriba dependiendo de si se agregan o se eliminan elementos. Esto puede hacer que el usuario vea de repente datos en los que no estaba enfocado anteriormente.
Para solucionar este problema, puedes intentar la siguiente solución:
event.nativeEvent.contentOffset.yen el métodoonScroll.Sin embargo, la API de la Lista de secciones no proporciona un método para desplazarse a una posición específica utilizando solo píxeles. En su lugar, deberás utilizar el método
scrollToLocation, que recibe el índice de la lista de secciones, el índice del elemento y permite especificar un desplazamiento para desplazarse hacia allí.Para hacer que el desplazamiento hacia la ubicación anterior sea aún más preciso, puedes realizar un seguimiento de la sección y el índice del elemento que el usuario está viendo y calcular la diferencia entre la ubicación de la sección/elemento y la posición Y de la ventana de visualización para obtener un desplazamiento.
Este es un problema complejo que requiere una cuidadosa consideración, y se agradecerían cualquier sugerencia.