@unif/react-native-design

Unif 的 React Native 设计系统，提供基础组件、主题、字体和通用 UI 组合。图标直接使用 @unif/react-native-icons 的命名组件。

文档站 · npm · 组件展厅

安装

yarn add @unif/react-native-design

按接入指南安装 peer 依赖并完成原生与 Worklets 配置。支持范围见 package.json，本库面向 React Native 新架构。

快速开始

应用根接入主题、手势和安全区，再从包根导入组件：

import { Button, ThemeProvider } from '@unif/react-native-design';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';

export function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <ThemeProvider>
          <Button label="保存" onPress={() => {}} />
        </ThemeProvider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}

需要 Toast 或 Confirm 时再接入对应 Host。组件继承主题与应用字号；主题 API、组件参数和宿主配置见文档站。

按需阅读

| 想做什么 | 入口 | | -------------------- | ----------------------------------------------- | | 查组件与 API | 组件索引 | | 运行展厅 | example | | 验证场景与平台行为 | 展厅指南 | | 在应用里编写测试 | 测试接入 | | 修改库或了解目标架构 | 开发资料 |

AI 文档索引 · 研发技能 · MIT 许可