#lynx-ui 是什么

lynx-ui 是 Lynx 团队维护的官方 Headless UI 组件库，目前为 ReactLynx 提供组件支持。它在前端侧统一了跨平台 UI 行为和 API 的差异，基于 Lynx 底层原语提供一致且高性能的组件。

#快速开始

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

#整体引入（推荐）

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

npm install @lynx-js/lynx-ui

yarn add @lynx-js/lynx-ui

pnpm add @lynx-js/lynx-ui

bun add @lynx-js/lynx-ui

deno add npm:@lynx-js/lynx-ui

在项目中使用：

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

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

#按组件引入

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

以 <Button> 组件为例：

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

yarn add @lynx-js/lynx-ui-button

pnpm add @lynx-js/lynx-ui-button

bun add @lynx-js/lynx-ui-button

deno add npm:@lynx-js/lynx-ui-button

在项目中使用：

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

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

#配置

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

#兼容性

• Lynx Engine：>= 3.2
• 平台：全面支持 iOS 和 Android，并在持续完善对 Harmony、Web 和 Desktop 的支持

#进阶资源

lynx-ui 组件大量使用了主线程脚本，将交互逻辑直接运行在主线程上以获得更流畅的体验。如果你想了解其工作原理，请参阅 ReactLynx 文档中的主线程脚本指南。

如果你使用 AI 辅助开发，lynx-ui Skills 提供了预配置的组件参考资料，帮助 coding agent 生成更准确的 lynx-ui 代码。

#与社区共建

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

#分享真实案例

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

#探索更多交互可能

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

#推动 Lynx 生态发展

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

访问 GitHub 仓库开始参与，或阅读贡献指南了解详情。