有没有 React Native 库 在屏幕上呈现黑色透明覆盖层并突出显示具有形状的组件?
在为如何使用应用程序(教程)构建一组叠加层时,我陷入了需要实现小插图组件以突出显示特定区域的地步。
理想情况下,我正在寻找一个提供像 React Native Walkthrough Tooltip 这样的解决方案的库。它根据组件知道高亮的位置。可悲的是,这个限制我只使用消息框形状。
我已经尝试了 2 种不同的解决方案:一种基于 React Native MaskedView另一个基于 react-native-hole-view .对于两者,我都在使用 React Native measure获得需要突出显示的组件的位置,但到目前为止我对结果不满意。
那里有其他选择吗?
Important note: as I am using react navigation, on some screens I need to cover the header and bottom navigation, this forces me to render my HighlightHoleOverlay within a transparent react native modal.
最佳答案
我编写了一个我认为可以满足您需求的库,您可以在这里找到它:react-native-highlight-overlay .
该库允许您在整个屏幕(或仅特定组件)上绘制覆盖图并突出显示突出显示下方的单个元素。它是 100% 自动的,无需手动计算尺寸,您只需用 HighlightableElement
将要突出显示的组件包裹起来并为其提供一个唯一 ID,然后将其提供给叠加层。基本示例:
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>
);
如果您突出显示circular
并给它一些填充,比如 padding: 25
,它应该看起来就像您的图像。
关于javascript - react 原生 : Highlight component/area by darkening the rest,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68819218/