react-native-ui-kitten

英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

UI 小猫

基于 Eva 设计系统构建的 React Native UI 库。
30 个可主题化组件，支持浅色和深色主题，运行时主题切换，适用于 iOS、Android 和网页。

文档
·
入门
·
组件
·
Migrate from v5
·
更新日志

UI Kitten 6 已发布。 它针对 React 19、React Native 0.81 以及新架构进行了重建。是否从 5.x 升级？请阅读 从 5.x 升级到 6 的迁移指南。

功能

• 30 个组件 — 按钮、输入框、选择器、日历、列表、标签页、抽屉、模态框、弹出框、菜单等，每个组件都有 Eva 风格、状态和尺寸。
• Eva 设计系统 — 每个组件都遵循 Eva 规范。可以使用默认外观，也可以提供自己的映射。
• 主题 — 内置明亮和暗黑主题，自定义品牌主题，并且在运行时无需重新加载即可切换主题。
• 新架构准备就绪 — 全部采用函数组件和 Hooks，在 React Native 0.81 和 Expo 54 的 Fabric 上经过验证。
• TypeScript 优先 — 为每个组件生成 .d.ts 文件，导出 ref 类型和属性类型。
• 跨平台 — 通过 React Native Web 支持 iOS、Android 和 Web。
• 可访问性 — 角色、状态和值对 VoiceOver、TalkBack 和屏幕阅读器可用。详见 可访问性指南 了解当前覆盖情况。
• 480 个 Eva 图标 — 通过 @ui-kitten/eva-icons 可选的 SVG 图标包，注册完整图标集或仅注册导入的图标，亦可使用自定义图标集。
• 双 CJS 和 ESM 构建 — 可在 Metro、Vite、Jest 和 Node 上使用，无需额外配置。

安装

UI Kitten 需要两个包以及 react-native-svg：

# Expo
npx expo install @ui-kitten/components @ui-kitten/eva react-native-svg

# Bare React Native
npm install @ui-kitten/components @ui-kitten/eva react-native-svg
cd ios && pod install

可选软件包：

npm install @ui-kitten/eva-icons          # Eva Icons pack
npm install @ui-kitten/moment             # Calendar / Datepicker with moment
npm install @ui-kitten/date-fns           # Calendar / Datepicker with date-fns
npm install -D @ui-kitten/metro-config    # Build-time style processing

从头开始？npx create-expo-app@latest MyApp，然后在其中运行上面的 Expo 命令。入门指南详细介绍了这两种路径。

快速开始

将你的应用根组件包裹在 ApplicationProvider 中，并传入 Eva 映射和主题：

import React from 'react';
import * as eva from '@ui-kitten/eva';
import { ApplicationProvider, Button, Layout, Text } from '@ui-kitten/components';

const HomeScreen = () => (
  <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text category='h1'>Hello UI Kitten</Text>
    <Button appearance='outline' status='primary'>
      GET STARTED
    </Button>
  </Layout>
);

export default () => (
  <ApplicationProvider {...eva} theme={eva.light}>
    <HomeScreen />
  </ApplicationProvider>
);

切换到 eva.dark，或在其上扩展你自己的主题，每个组件都会使用新的调色板重新渲染。请参阅 品牌化 和 运行时主题。

兼容性

软件包

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| 组件、主题钩子和 ApplicationProvider。 |
| @ui-kitten/eva |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| Eva mapping plus the light and dark themes. Required. |
| @ui-kitten/material |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| Alternative Material-flavoured mapping and themes. |
| @ui-kitten/eva-icons |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| 480 个作为 IconRegistry 包的 Eva 图标。 |
| @ui-kitten/moment |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| moment date service for Calendar and Datepicker. |
| @ui-kitten/date-fns |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| date-fns date service for Calendar and Datepicker. |
| @ui-kitten/metro-config |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| 在构建时预编译 Eva 映射的 Metro 插件。 |
| @ui-kitten/processor |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| 映射处理器。替代 @eva-design/dss 和 @eva-design/processor。 |
| @ui-kitten/mapping-base |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| eva 和 material 使用的共享映射模式。 |
| @ui-kitten/codemod |

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。
| Rewrites a v5 app for v6 and reports what it could not touch. |

Migrate from v5

包名、组件名和属性保持不变。破坏性更改包括从类组件迁移到函数组件（ref 类型）、删除 styled 装饰器以使用 useStyled 以及强制的 peer 依赖。迁移指南 列出了每个更改及其修复方法。

npx @ui-kitten/codemod 会重写机械部分，并生成无法修改的报告；添加 --write 以应用更改。源码位于 src/codemod。

文档和示例

• 文档网站 — 指南、设计系统参考以及每个组件的单独页面。
• 展示应用 — 一个 Expo 应用，可以渲染每个组件并提供实时主题和映射切换。使用 yarn showcases:start 启动，或使用 yarn showcases:ios 或 yarn showcases:android 运行。
• Eva 设计系统 — 映射所实现的规范。

贡献

欢迎提出问题和拉取请求。该仓库是一个 Yarn 3 Turborepo 单体仓库；各个包位于 src/*，文档网站位于 website/。

yarn install
yarn build       # build every package
yarn test        # jest
yarn lint
yarn typecheck
yarn docs:dev    # docs site at localhost:3000

每个面向用户的更改都需要一个 changeset (yarn changeset)。发布是从 master 和 next 自动进行的；请参阅 RELEASING.md。

问题和想法请放在 GitHub 讨论区；bug 请提交到 Issues 中。

许可证

MIT。

UI Kitten 由 Akveo 团队创建。v6 版本重写及当前维护由 Vlad Bataev 和 UI Kitten 贡献者 完成。Eva 处理器和映射包来源于 @eva-design/*；请参阅 NOTICE。@ui-kitten/eva-icons 中的图标是 Akveo 提供的 Eva Icons，MIT 许可；请参阅该包的 LICENSE。