For AI agents: the complete documentation index is available at /next/zh/llms.txt, the full documentation bundle is available at /next/zh/llms-full.txt, and this page is available as Markdown at /next/zh/ui/components/overlay.md.
lynx-ui logo
lynx-ui
  • 简体中文
  • Overlay

    一个适用于 ReactLynx 的浮层组件,用于在主视图树之上通过原生浮层渲染内容。

    OverlayView 是<overlay>的即插即用替代方案。建议优先使用它,而不是直接使用原生<overlay>,这样可以减少配置工作,并避免平台差异带来的使用错误。

    基础用法

    import { OverlayView } from '@lynx-js/lynx-ui';
    
    export function Example() {
      return (
        <OverlayView container="default">
          <view className="panel">
            <text>Overlay content</text>
          </view>
        </OverlayView>
      );
    }

    结构

    <OverlayView>
      <view />
    </OverlayView>

    OverlayViewProps

    children
    iOS
    Android
    Harmony
    类型ReactNode
    子元素
    className
    iOS
    Android
    Harmony
    类型string
    类名
    container
    iOS
    Android
    Harmony
    类型string
    建议使用全屏透明容器来实现弹窗,这样性能更好。或者,你也可以选择通过覆盖层来使用弹窗。
    debugLog
    iOS
    Android
    Harmony
    类型boolean
    显示调试日志。发现 bug 时开启。
    id
    iOS
    Android
    Harmony
    类型string
    标识符
    overlayLevel
    iOS
    Android
    Harmony
    类型1 | 2 | 3 | 4
    仅在容器设置为原生容器名称时生效。调整附近元素的显示层级。一旦渲染后,不支持手动更改 overlayLevel。
    overlayViewProps
    iOS
    Android
    Harmony
    类型OverlayViewProps | ViewProps
    将被直接传递到底层元素的额外属性
    style
    iOS
    Android
    Harmony
    类型CSSProperties
    样式

    OverlayViewRef

    getRect
    类型(handleLayoutUpdate: (e: unknown) => void) => void
    除非另有说明,本项目采用知识共享署名 4.0 国际许可协议进行许可,代码示例采用 Apache License 2.0 许可协议进行许可。