React Native：通过使其余部分变暗来突出显示组件/区域[关闭]

Question

如何使用 React Native 通过在深色覆盖层上开一个洞来突出显示页面的区域/组件/元素？

在构建一组用于如何使用应用程序的叠加层（教程）时，我陷入了需要实现小插图组件来突出显示特定区域的困境。

理想情况下，我正在寻找像 React Native Walkthrough Tooltip 这样的解决方案，它可以根据组件知道突出显示的位置。遗憾的是，这限制了我只能使用消息框形状。

我已经尝试了两种不同的解决方案：一种基于 React Native MaskedView，另一种基于 react-native-hole-view。对于两者，我都使用 React Nativemeasure 来获取需要突出显示的组件的位置，但到目前为止我对结果不满意。

关于如何在 React Native 中解决这个问题有什么建议吗？

重要提示：当我使用react navigation时，在某些屏幕上我需要覆盖 标题和底部导航，这迫使我渲染我的 在透明的反应本机模态中突出显示HoleOverlay。

Answer 1

我编写了一个我认为可以满足您需求的库，您可以在这里找到它：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

，它应该看起来就像您的图像。