Lynx 3.7：桌面端、SVG、Skills 与 ReactLynx 更新#

2026年4月16日

icecreamx10多平台主管 @ Lynx

MoonfaceX组件主管 @ Lynx

upupming工程师 @ Lynx

Lynx 团队lynxjs.org

复制 Markdown

Lynx 3.7 已经正式发布！

本次版本正式支持 macOS 和 Windows 桌面端平台，引入了新的 SVG 元件，引入了新的 Agent Skills 以提升可观测性，并为 ReactLynx 带来了更简单的 External Bundle presets 和跨线程共享模块能力。

#桌面端支持：macOS 与 Windows

我们此前计划在 Lynx 3.5 中开源桌面端支持，随后决定进一步开源完整的桌面端技术栈。在 Lynx 3.7 中，这一愿景已成为现实。

Lynx 正式支持 macOS 和 Windows 作为一级平台。你现在可以在原生桌面应用中构建和渲染 Lynx 视图，使用与移动端和 Web 端完全相同的前端技术栈和工具链。 我们也计划在最近开源 Lynxtron，它是一个 Electron-like 的桌面应用框架，使用 Lynx 作为 UI 渲染层。敬请期待！

desktopsrc/mouse-cursor/App.tsx

Code

预览

#CSS 与元件支持

渲染核心在各平台间复用（包括 CSS 引擎），CSS 属性覆盖率自然接近完整，目前达 97%（319 项中的 311 项）。桌面端界面由 Lynx 自绘渲染，而不是通过系统原生控件拼装，原生元件需要基于自绘渲染器重新实现，元素属性覆盖率目前为 73%（246 项中的 179 项），macOS 与 Windows 的支持范围保持一致，并持续扩展中。已覆盖的 CSS 能力包括：

• 布局：Flexbox、Grid、Linear Layout、完整盒模型、定位与相对定位。
• 样式：排版、边框、阴影、渐变、蒙版、滤镜，以及 CSS 自定义属性。
• 动画：animation、transition、@keyframes 和完整的 transform 能力。

这意味着大多数为移动端构建的 Lynx 页面已经可以在桌面端渲染，前端代码通常只需极少修改甚至无需修改。每个 API 页面上方均提供兼容性概览，下方附有详细的兼容性表格。也可在 API 兼容状态看板 上一览全局，现已包含 macOS 和 Windows 列。

#桌面端专属能力

#鼠标事件

<view
  onMouseDown={(e) =>
    console.log(`按键 ${e.button} 位置 (${e.clientX}, ${e.clientY})`)
  }
  onMouseMove={(e) => handleHover(e)}
  onMouseLeave={() => resetState()}
/>

#键盘事件

<input
  onKeyDown={(e) => console.log(`按下按键: ${e.key}`)}
  onKeyUp={(e) => console.log(`释放按键: ${e.key}`)}
/>

#滚轮事件

<view onWheel={(e) => console.log(`滚轮偏移: ${e.deltaX}, ${e.deltaY}`)} />

#CSS cursor

<view style={{ cursor: 'pointer' }}>
  <text>Hover me</text>
</view>

#快速上手

桌面端的接入细节可直接查看将 Lynx 集成到现有应用。该页面现已包含与 Android、iOS、HarmonyOS、Web 并列的桌面端指南。 后续也会有一个由 Lynxtron 构建的 playground 应用，在桌面端更直接地获取并运行 Lynx 示例。

#<svg>：可缩放矢量图形

<svg> 作为独立元件在 Lynx 3.7 中新增，为图标、图表和其他分辨率无关的图形场景提供跨平台的原生矢量渲染能力。

<svg> 支持内联矢量内容：

svgsrc/base/index.tsx

Code

预览

也可以直接加载外部 SVG 资源：

<svg
  style={{ width: '100px', height: '100px' }}
  src="https://example.com/icon.svg"
/>

为了最大化性能，<svg> 将解析工作交由后台独立线程处理，并将整个图形作为一个原生视图进行渲染，而非为每个节点创建独立的元素。这使得主线程在解析耗时和节点数量上都保持轻量，非常适合图标、插画和图表等静态展示场景。它支持 17 个常用 SVG 标签和超过 40 个属性，并在 Android、iOS、HarmonyOS、macOS、Windows 和 Web 之间保持一致的渲染表现。

#Agent Skills

作为 Lynx for AI 的一部分，六个 Agent Skills 现已开源。安装任意技能：

npx skills add lynx-community/skills -s <skill-name>

配合 Lynx DevTool MCP，coding agent 现在可以检查运行中的页面、验证交互并缩短自调试链路。

#ReactLynx

#External Bundle Presets

External Bundle 允许你构建一次 Lynx bundle，然后在多个 Lynx 应用中运行时加载。当你需要跨应用共享 ReactLynx 组件或通用业务 bundle 时，可以使用它。与 Chunk Splitting 用于拆分单个应用内代码不同，External Bundle 专为跨应用复用而设计。

Lynx 3.7 通过 defineExternalBundleRslibConfig 新增了内置 presets 以简化配置：

import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config';
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';

export default defineExternalBundleRslibConfig({
  id: 'comp-lib',
  source: {
    entry: {
      './App.js': './external-bundle/CompLib.tsx',
    },
  },
  plugins: [pluginReactLynx()],
  output: {
    externalsPresets: {
      reactlynx: true,
    },
  },
});

然后在宿主应用里加载这份 bundle：

#跨线程共享模块

默认情况下，主线程函数无法直接调用没有 'main thread' 指令的普通函数，这使得代码复用变得困难。共享模块机制解决了这一限制，允许你显式声明某些模块可在主线程和后台线程之间共享。

在 import 语句后添加 with { runtime: 'shared' }，该模块导出的函数、类和对象即可在主线程函数中直接调用：

#升级指南

参照官网接入 Lynx 到现有应用，更新 Lynx 依赖版本，即可完成 Lynx 3.7 版本升级。