Estoy tratando de representar un elemento que está posicionado absolutamente detrás de una lista plana y se revelará una vez que el usuario se desplace hacia abajo. El problema al que me enfrento es que el elemento debe poder interactuar, y el elemento raíz de la lista plana toma todos los eventos de punto en lugar del elemento de fondo.
const FlatlistOverElement: FC = () => ( <View style={{ flex: 1, width: '100%' }}> <FlatList data={data} style={{ flexGrow: 1 }} ListFooterComponent={() => ( <View style={{ height: BACKGROUND_ELEMENT_HEIGHT, opacity: 0 }} /> )} renderItem={RenderItem} /> <AbsolutelyPositionedElementBehindFlatList /> </View> )He intentado eliminar eventos de punto de la lista plana, luego la lista plana no se puede desplazar.
He intentado establecer la altura de la lista plana más pequeña y dejar que el contenido se desborde. Esto le permite al usuario interactuar con el elemento, pero para esa parte de la pantalla, el usuario no puede desplazarse por la lista plana.
¿Qué otro enfoque puedo utilizar para resolver este problema?
Puede usar la propiedad zIndex al completar el desplazamiento. Simplemente proporcione un valor de zIndex más alto que el de FlatList para el componente absoluto cada vez que se complete el desplazamiento. Accesorios de diseño de zIndex
Gracias por las sugerencias. Terminé usando un zIndex para colocar el contenido interactuable frente a la lista plana cuando me desplacé hasta el final, además de agregar puntos de ajuste en ambos lados del elemento. Para evitar que el usuario revele a medias el elemento y no pueda interactuar con él.