Lynx UI logo
Lynx UI
  • 简体中文

      • <LazyComponent>

      一个适用于 ReactLynx 的懒加载组件，用于延迟加载和渲染非关键 UI 元素。
      Info

      你可以查看源码来了解它的运行原理，也欢迎大家提 MR 来丰富其能力。

      基础用法

      <LazyComponent>在其自身曝光后再渲染其内容，多用于优化首屏渲染性能。

      lynx-ui-lazy-componentBasic/index.tsx
      Code
      预览

      调整可见边界

      通过调整曝光边界来提前渲染<LazyComponent>的内容，优化滚动和动画的视觉体验。

      lynx-ui-lazy-componentVisibilityMargin/index.tsx
      Code
      预览

      LazyComponentProps

      bottom
      iOS
      Android
      类型px | rpx·默认值10px
      来更改目标节点本身在曝光中的视窗大小，>0代表扩展节点下边界，<0代表缩小节点下边界
      children
      iOS
      Android
      类型ReactNode
      子节点
      estimatedStyle
      iOS
      Android
      类型CSSProperties
      需要设置预估的高度和宽度
      left
      iOS
      Android
      类型px | rpx·默认值10px
      来更改目标节点本身在曝光中的视窗大小，>0代表扩展节点左边界，<0代表缩小节点左边界
      pid
      iOS
      Android
      类型string
      用于标记懒加载的曝光时机。请确保该标识在整个页面中是唯一的。
      right
      iOS
      Android
      类型px | rpx·默认值10px
      来更改目标节点本身在曝光中的视窗大小，>0代表扩展节点右边界，<0代表缩小节点右边界
      scene
      iOS
      Android
      类型string
      用于标记懒加载的曝光时机。请确保该标识在整个页面中是唯一的。
      top
      iOS
      Android
      类型px | rpx·默认值10px
      来更改目标节点本身在曝光中的视窗大小，>0代表扩展节点上边界，<0代表缩小节点上边界
      unloadable
      iOS
      Android
      类型boolean·默认值false
      当元素不可见时卸载子元素以节省内存使用
      unmountOnExit
      iOS
      Android
      类型boolean·默认值false
      当元素不可见时卸载子元素以节省内存使用
      除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。