React Native UI Kitten - 基于Eva的UI库

UI Kitten 是一个基于 Eva Design System 的 React Native 开源 UI 组件库，在 GitHub 上有 10663 stars 和 962 forks，使用 MIT 协议。这个仓库创建于 2016 年，最近更新在 2026 年 11 月，维护比较活跃。它提供了超过 30 个主题化组件，支持 iOS、Android 和 Web，代码用 TypeScript 编写。React Native 开发者可以用它快速搭建界面，省去自己写基础组件的功夫。

适合谁

• React Native 应用开发者：正在开发跨平台 App，需要一套现成的组件库，不想从头设计按钮、输入框的样式。
• Expo 用户：官方文档明确支持 Expo 54，直接用 npx expo install 命令安装，对 Expo 工作流很友好。
• 需要轻量主题定制的小团队：项目要求白天/夜间模式切换，或者要调整品牌颜色，又不想用太重的 UI 框架。

能解决什么问题

主题切换不用重新加载应用。UI Kitten 基于 Eva 设计系统，默认带了 light 和 dark 两套主题。在运行时切换主题，只需要把 ApplicationProvider 的 theme 属性从 eva.light 改成 eva.dark，所有组件就会自动换色。对于需要昼夜模式的应用，这个功能能节省很多工作量。

组件样式统一、可预测。它提供的 30 多个组件，都按照 Eva 规范定义了 appearance、status、size 这些属性。用熟之后，新页面和旧页面的风格能保持一致，不用反复去对设计稿。

TypeScript 下不缺类型。项目是 TypeScript 优先，所有组件都导出了 ref 类型和 prop 类型。配合 IDE 的自动补全，写代码的时候能少查很多次文档。

跨端复用。同一套代码可以跑在 iOS、Android 和 Web（通过 React Native Web）上，组件行为基本一样。对于需要在移动端之外再补一个网页版的团队，这点很有用。

怎么开始用

安装很简单，官方给了 Expo 和裸 React Native 两种方式：

# 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 图标包
npm install @ui-kitten/moment             # Calendar / Datepicker 用 moment
npm install @ui-kitten/date-fns           # Calendar / Datepicker 用 date-fns
npm install -D @ui-kitten/metro-config    # 构建时样式处理

最简化的启动代码，把应用的根组件包在 ApplicationProvider 里：

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>
);

优点和坑

优点：

• 文档和迁移指南很全。官方文档覆盖了从 v5 迁移到 v6 的完整步骤，v6 是专门为 React 19 和 React Native 0.81 重构的。
• 组件覆盖面广，从按钮、输入框到日历、抽屉、弹窗都有，日常开发需要的组件基本都包含了。
• 构建产物同时提供 CJS 和 ESM，Metro、Vite、Jest 环境都能直接用，不用额外配置。

坑：

• 依赖 react-native-svg，这是硬依赖，装完主包必须记得装它，漏了组件会跑不起来。
• 社区版只提供 Eva 图标集，如果你有自己的品牌图标，需要自己接入一套 icon set，有一定配置成本。
• 如果项目不是从零开始，而是老项目迁入，要评估一下从 v5 到 v6 的迁移成本——虽然官方给了迁移指南，但涉及主题映射调整，不是改一行代码就能搞定。
• 这个仓库在 2016 年创建，中间隔了几年，React Native 生态变化很大。如果你是刚接触 React Native 的新手，用这个库的学习曲线会比直接用系统组件更陡。

适合你吗

如果你在做一个新项目，特别是用 Expo 起步、要求 TypeScript 和昼夜主题，UI Kitten 可以直接拿来用，安装快、文档全。

如果你是在老项目里迁移进来，或者对图标有很强的定制需求，建议先读一下 v5 到 v6 的迁移指南和图标注册那部分文档，再决定值不值得切换。

如果你是React Native 完全新手，建议先用系统组件跑通一个 Demo，再引入 UI Kitten，不然出错了不好区分是代码问题还是库的问题。

---

常见问题

React Native 有哪些好用的 UI 框架或组件库？

React Native UI Kitten 是一个主流选择。它基于 Eva Design System，提供了 30 多个主题化组件，支持 iOS、Android 和 Web，用 TypeScript 开发，在 GitHub 上有超过 1 万星，维护活跃。需要统一风格和主题切换的跨平台应用开发者，可以用它来提升效率。

React Native 在国内的实际应用场景多吗？

React Native 在跨平台移动应用开发中用得很多。像 UI Kitten 这样的组件库就是为了提升这类应用的开发效率。它支持 Expo 和裸 React Native 项目，适合需要快速构建、并且要兼顾白天/夜间模式切换的移动应用，国内很多团队用它来统一多端 UI，节省重复开发成本。

React Native UI Kitten 怎么安装和使用？

安装方式看项目类型。Expo 项目用命令 npx expo install @ui-kitten/components @ui-kitten/eva react-native-svg。裸 React Native 项目用 npm install 装同样的包，然后在 iOS 目录执行 pod install。最后，用 ApplicationProvider 包裹根组件并指定主题就能用了。

React Native UI Kitten 是免费的吗？

是的，完全免费。UI Kitten 采用 MIT 开源协议，个人和商业项目都可以免费使用、修改和分发。你可以在 GitHub 上拿到全部源代码，不用付钱。

UI Kitten 和 React Native 其他 UI 库相比有什么特点？

UI Kitten 的核心特点是深度集成 Eva 设计系统，提供开箱即用的运行时主题切换（比如 light/dark 模式），所有 30 多个组件样式统一可预测。它专为 React Native 和 Expo 优化，TypeScript 支持完善，同一套代码能跑在 iOS、Android 和 Web 上，适合追求开发效率和设计一致性的团队。

相关工具推荐

• 想自托管网站省月费？了解 October CMS 这个基于 Laravel 的开源方案
• 需要快速搭建全栈Web应用？看看Python写的低代码框架Frappe
• 构建企业级内容管理系统？Django CMS 是一个强大的开源选择