如何在UI Kitten中切换至Material Design样式？

1. 安装对应主题包 #

UI Kitten默认自带Eva Design，但Material Design需要单独安装主题包，执行以下命令：

# npm
npm install @eva-design/material eva-design

# yarn
yarn add @eva-design/material eva-design

2. 导入主题配置 #

在项目入口文件（比如App.js/main.tsx）中，导入两个主题的样式映射规则和配色方案：

import { mapping as evaMapping, light as evaLight } from 'eva-design';
import { mapping as materialMapping, light as materialLight } from '@eva-design/material';

如果需要深色模式，还可以导入对应主题的深色配置，比如dark as evaDark、dark as materialDark。

3. 通过ThemeProvider切换主题 #

UI Kitten依赖ApplicationProvider统一管理主题，切换样式只需替换它的mapping和theme属性。可以用状态变量控制切换逻辑，示例代码如下：

import React, { useState } from 'react';
import { ApplicationProvider, Button, Layout } from '@ui-kitten/components';

// 导入主题配置
import { mapping as evaMapping, light as evaLight } from 'eva-design';
import { mapping as materialMapping, light as materialLight } from '@eva-design/material';

export default () => {
  // 存储当前激活的主题配置
  const [activeTheme, setActiveTheme] = useState({
    mapping: evaMapping,
    theme: evaLight
  });

  // 切换主题的触发函数
  const switchTheme = () => {
    setActiveTheme(prev => 
      prev.mapping === evaMapping 
        ? { mapping: materialMapping, theme: materialLight }
        : { mapping: evaMapping, theme: evaLight }
    );
  };

  return (
    <ApplicationProvider mapping={activeTheme.mapping} theme={activeTheme.theme}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Button onPress={switchTheme}>切换Material/Eva样式</Button>
      </Layout>
    </ApplicationProvider>
  );
};

关键说明 #

• mapping是组件的样式规则映射，theme是配色、字体等主题变量，二者必须同时替换才能实现完整样式切换，只换其中一个会导致样式错乱。
• 已有项目中切换主题，只需修改ApplicationProvider的对应属性，所有UI Kitten组件会自动应用新主题样式。

内容的提问来源于stack exchange，提问作者Alan Kucola