0
181
VisualizaçõesReact Native: resalta el componente/área oscureciendo el resto
¿Hay alguna biblioteca React Native que represente una superposición transparente oscura sobre la pantalla y resalte un componente con una forma?
Mientras construía un conjunto de superposiciones para cómo usar una aplicación (tutoriales), me quedé atascado en un punto en el que necesito implementar un componente de viñeta para resaltar un área específica.
Idealmente, estoy buscando una biblioteca que proporcione una solución como React Native Walkthrough Tooltip que conozca la posición del resaltado en función del componente. Lamentablemente, este me limita a usar solo la forma del cuadro de mensaje.
Ya probé 2 soluciones diferentes: una basada en React Native MaskedView y otra basada en react-native-hole-view . Para ambos, estoy usando la medida React Native para obtener la posición del componente que necesita ser resaltado, pero hasta ahora no estoy contento con el resultado.
¿Hay alguna alternativa por ahí?
Nota importante: como estoy usando la navegación de reacción , en algunas pantallas necesito cubrir el encabezado y la navegación inferior, esto me obliga a representar mi HighlightHoleOverlay dentro de un modal nativo de reacción transparente.
1 Respostas
Responde à pergunta0
He creado una biblioteca que creo que se ajustaría a sus necesidades, puede encontrarla aquí: react-native-highlight-overlay .
Esta biblioteca le permite dibujar una superposición sobre toda la pantalla (o solo un componente específico) y resaltar un solo elemento debajo del resaltado. Es 100% automático, no se requieren cálculos de tamaño manuales, todo lo que necesita hacer es envolver los componentes que desea resaltar con HighlightableElement y darle una identificación única que luego proporciona a la superposición. Ejemplo básico:
import { HighlightableElement, HighlightableElementProvider, HighlightOverlay, } from "react-native-highlight-overlay"; // Remember to wrap the ROOT of your app in HighlightableElementProvider! return ( <HighlightableElementProvider> <HighlightableElement id="important_item"> <TheRestOfTheOwl /> </HighlightableElement> {/* * The HighlightOverlay should be next to the ROOT of the app, * since it is NOT a modal, it's just an absolutely positioned view. * If you want it to be a modal, wrap it in <Modal> yourself first, * but I recommend not using modals since they can be buggy. */} <HighlightOverlay // You would usually use a state variable for this :) // Or store it in a context / store so you can change it from anywhere in the app. highlightedElementId="important_item" onDismiss={() => { // Called when the user clicks outside of the highlighted element. // Set "highlightedElementId" to nullish to hide the overlay. }} /> </HighlightableElementProvider> ); Si hace que el resaltado sea circular y le da algo de relleno, diga padding: 25 , debería verse como su imagen.