Library UI-Kitten 基于React Native的主题化UI组件库

React Native 项目里，想做出一套统一、可主题化、又能暗色切换的 UI，往往要自己搭设计 token、写一堆样式。第三方组件东拼西凑，主题改起来牵一发动全身。
开发者想要的是：一套基于设计系统的组件，主题用配置驱动，换肤与暗色只是改一处。

项目基本信息

一、项目介绍

akveo/react-native-ui-kitten（现演进为 Eclipse 基金会的 UI Kitten）是一个 MIT 协议的 React Native UI 组件库。它围绕一套可配置的设计系统（基于 Eva design system）构建，组件样式由 theme 驱动，支持浅色/深色一键切换、运行时换肤，并内置图标集（Eva Icons）。它把组件外观与业务逻辑解耦——同样的代码，换 theme 即得不同视觉。适合需要一致设计语言、又要在 iOS/Android 双端复用的 RN 应用。

二、核心优势

1. 主题驱动：基于 Eva 设计系统，浅色/深色与换肤只改一处配置。
2. 组件-样式解耦：逻辑与外观分离，换主题不动业务代码。
3. 跨端一致：同一套组件在 iOS 与 Android 保持统一视觉。
4. 图标内置：配套 Eva Icons，省去找图标库的麻烦。
5. MIT 协议：自由用于商业 RN 应用。

三、适用场景

• React Native App 需要统一、可主题化的设计语言。
• 希望浅色/深色模式可一键切换的产品。
• 团队想减少自研基础组件、专注业务。
• 需要在 iOS/Android 复用同一套 UI 代码的场景。

四、安装教程

在 React Native 项目中安装：

npm install @ui-kitten/components @ui-kitten/eva-icons react-native-svg
# Expo 项目额外: npx expo install react-native-svg

在应用根部包裹 ApplicationProvider 并选定主题：

import { ApplicationProvider, Layout, Text } from '@ui-kitten/components'
import * as eva from '@eva-design/eva'
<ApplicationProvider {...eva} theme={eva.light}>
  <Layout><Text>Hello</Text></Layout>
</ApplicationProvider>

常见报错：漏装 react-native-svg 会渲染不出图标；Expo 与裸 RN 依赖装法不同。

五、使用示例

使用组件（示例 Button）：

import { Button } from '@ui-kitten/components'
<Button onPress={() => {}}>提交</Button>

真实效果：按钮沿用当前 theme 的配色与圆角；把 theme={eva.light} 换成 eva.dark 即可全局切暗色，无需改任何组件代码。

六、常见问题

Q：UI Kitten 和 React Native Paper 怎么选？
A：UI Kitten 强调主题驱动与 Eva 设计系统、换肤灵活；Paper 更贴近 Material Design，按设计语言偏好选。
Q：需要自己写样式吗？
A：多数情况用内置 theme 即可；需要深度定制再写 mapping 覆盖 token。
Q：协议能商用吗？
A：采用 MIT License，可自由用于商业 App，需保留版权与许可声明。

七、总结

UI Kitten 把 React Native 的 UI 统一到一套主题驱动的设计系统，换肤与暗色只改一处配置，让跨端 App 既一致又好维护。对 RN 团队，它是 MIT 协议、与 Eva 设计系统配套的务实组件库。