lynx-ui 是什么

lynx-ui 是你开始使用 Lynx 组件的第一站。它是由 Lynx 团队长期维护的 Headless UI 组件库，为构建灵活、通用且高性能的 Lynx 组件提供基础能力。

lynx-ui 通过前端组件补足原生元件的适配能力，帮助建设高性能、类原生且兼容性良好的 Lynx 组件生态。

不同平台的 UI 特性在行为、API 乃至设计理念上都有显著差异，尤其是高阶能力更是如此。跨平台框架需要尽可能收敛这些差异，Lynx 也不例外。

lynx-ui 会梳理底层原子化 API 的行为和限制，并在前端侧统一这些差异，提供更一致的跨平台体验。

快速开始

lynx-ui 支持整体引入和按组件引入。

整体引入（推荐）

建议直接整体引入 lynx-ui。lynx-ui 支持 tree-shaking，未使用的组件不会增加最终产物体积。

npm

yarn

pnpm

bun

deno

npm install @lynx-js/lynx-ui

在项目中使用：

import { Button } from '@lynx-js/lynx-ui';

export default function App() {
  return (
    <view>
      <Button />
    </view>
  );
}

按组件引入

lynx-ui 的每个组件也会作为单独的包发布。如果存在兼容性约束或特定依赖需求，可以只引入需要使用的组件包。

以 <Button> 组件为例：

npm

yarn

pnpm

bun

deno

npm install @lynx-js/lynx-ui-button

在项目中使用：

import { Button } from '@lynx-js/lynx-ui-button';

export default function App() {
  return (
    <view>
      <Button />
    </view>
  );
}

我应该选择按组件引入还是整体引入

默认推荐整体引入，原因如下：

安装和使用更简单
tree-shaking 会自动优化产物体积

配置

export default defineConfig({
  ...
  plugins: [
    pluginReactLynx({
      ...
      targetSdkVersion: '2.14',
      enableNewGesture: true,
    }),
  ],
})

担心配置改动影响其他页面？

这里列出的是整个组件库的配置需求。如果你担心配置变动影响其他页面，可以查看具体组件的配置要求；单个组件通常约束更宽松。

兼容性

LynxSDK：>= 3.2

最低版本不满足需求？

这里列出的是整个组件库的最低版本需求。如果你的最低版本不能满足要求，可以查看具体组件的版本要求；单个组件通常支持更低版本。

与社区共建

lynx-ui 是探索和验证 Lynx 组件创意的平台。我们欢迎来自社区的贡献，并希望让每一次改进都能被更多开发者看见和复用。

分享真实案例

无论你正在开发电商、社交、直播等类型的 App，还是在实践中发现了有意义的交互、更好的稳定性方案或性能优化点，我们都欢迎你分享成果。lynx-ui 会帮助将这些实践沉淀为可复用的组件，并在兼容性和性能方面提供必要保障。

探索更多交互可能

lynx-ui 致力于推动 Lynx 交互设计能力的发展。我们期待与社区一起讨论、迭代并实现更具表现力的用户体验方案。

推动 Lynx 生态发展

你的 Lynx 开发经验对生态发展至关重要。lynx-ui 诚挚欢迎你的反馈、参与和贡献。

Info

仓库地址 | 贡献指南

#lynx-ui 是什么

#快速开始

#整体引入（推荐）

#按组件引入

#配置

#兼容性

#与社区共建

#分享真实案例

#探索更多交互可能

#推动 Lynx 生态发展