我使用NativeBase中的popover組件來創建我的Popover:

const SettingsButton: React.FC<Props> = () => {
    return (
        <Popover
            trigger={(triggerProps) => {
                return (
                    <Button {...triggerProps} variant={'ghost'}>
                        <HamburgerIcon size="xl" color="lightText" />
                    </Button>
                );
            }}
        >
            <SettingsPopover />
        </Popover>
    );
};

(完整App在此，Popover在此)

我希望彈出窗口后面的頁面是可滾動的，類似于當您的設置/配置文件彈出窗口打開時，您可以滾動Github頁面。

到目前為止，我能想到的最好的辦法就是

onOpen={() => {
    document.body.style.overflow = 'scroll';
}}
onClose={() => {
    document.body.style.overflow = 'hidden';
}}

在我的Popover-Component中，但這增加了第二個滾動條，并在滾動時直接關閉Popover(在移動版本的應用程序中，它不會改變任何東西)，這是一個有點糟糕的解決方案，我認為肯定有更好的方法。

我相信立場:固定；你想做什么就做什么。

位置:固定；使彈出窗口保持在適當的位置，而不管視口在哪里，您可以使用top、left或其他CSS配置它顯示的位置。

固定的；不變的 該元素將從普通文檔流中刪除，并且不會在頁面布局中為該元素創建任何空間。它相對于由視口建立的初始包含塊進行定位，除非它的某個祖先將transform、perspective或filter屬性設置為n one以外的值(請參見CSS Transforms規范)，或者將will-change屬性設置為transform，在這種情況下，該祖先的行為與包含塊相同。(請注意，瀏覽器在透視和過濾器方面存在不一致，這有助于抑制塊的形成。)它的最終位置由top、right、bottom和left的值決定。

位置- MDN