@unif/react-native-ui

UNIF React Native UI 组件库 — 为 React Native 0.78+ 构建的现代化 UI 系统。

环境要求

| 依赖 | 版本 | |------|------| | React Native | >= 0.78.0 | | React | >= 19.0.0 | | react-native-gesture-handler | >= 2.20.0 | | react-native-reanimated | >= 4.0.0 | | react-native-svg | >= 15.2.0 | | react-native-worklets | >= 0.8.0 |

使用 Expo 时，SDK 54 及以上已内置上述所有依赖。

安装

Expo 项目

npx expo install @unif/react-native-ui \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-svg \
  react-native-worklets

在 app.json 中添加插件：

{
  "expo": {
    "plugins": ["react-native-reanimated"]
  }
}

裸 React Native 项目

yarn add @unif/react-native-ui \
  react-native-gesture-handler \
  react-native-reanimated \
  react-native-svg \
  react-native-worklets

在 babel.config.js 中添加（必须是 plugins 最后一项）：

plugins: ['react-native-reanimated/plugin']

应用根部需要包裹 GestureHandlerRootView（Slider、Sheet 等组件依赖手势系统）。

快速开始

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { ThemeProvider, PortalHost, useTheme } from '@unif/react-native-ui';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeProvider>
        <MyScreen />
        <PortalHost />
      </ThemeProvider>
    </GestureHandlerRootView>
  );
}

function MyScreen() {
  const tokens = useTheme();
  return (
    <View style={{ backgroundColor: tokens.background, flex: 1 }}>
      <Text style={{ color: tokens.foreground }}>Hello</Text>
    </View>
  );
}

主题定制

import { createTheme, ThemeProvider } from '@unif/react-native-ui';

const brandTheme = createTheme({
  primary: '#EB6E00', // 主色
  radius: 8,          // 基础圆角（px）
});

<ThemeProvider theme={brandTheme} mode="light">
  {/* ... */}
</ThemeProvider>

mode 支持 'light' | 'dark' | 'system'（默认跟随系统）。

Theme Hooks

import {
  useTheme,
  useThemeMode,
  useColorModeValue,
  useReducedMotion,
} from '@unif/react-native-ui';

// 获取当前模式下的完整 token 对象
const tokens = useTheme();

// 选择器模式（避免不必要的重渲染）
const primary = useTheme((t) => t.primary);

// 获取/切换颜色模式
const { mode, setMode } = useThemeMode();

// 根据颜色模式返回不同值
const bg = useColorModeValue('#ffffff', '#0a0a0a');

// 是否开启了无障碍减弱动画
const reduced = useReducedMotion();

样式系统（recipe）

使用 recipe() 定义多变体组件样式，支持 WeakMap 缓存、变体组合、样式继承：

import { recipe, useStyles } from '@unif/react-native-ui';

const buttonRecipe = recipe({
  slots: { root: {}, label: {} },
  base: {
    root: { borderRadius: 8, paddingHorizontal: 16, paddingVertical: 10 },
    label: { fontWeight: '600' },
  },
  variants: {
    variant: {
      solid: (tokens) => ({ root: { backgroundColor: tokens.primary } }),
      outline: (tokens) => ({
        root: { borderWidth: 1, borderColor: tokens.primary },
      }),
    },
    size: {
      sm: { root: { paddingVertical: 6 }, label: { fontSize: 13 } },
      md: { root: { paddingVertical: 10 }, label: { fontSize: 15 } },
    },
  },
  defaults: { variant: 'solid', size: 'md' },
});

function Button({ variant, size, children }) {
  const styles = useStyles(buttonRecipe, { variant, size });
  return (
    <Pressable style={styles.root}>
      <Text style={styles.label}>{children}</Text>
    </Pressable>
  );
}

Portal

import { PortalHost, Portal } from '@unif/react-native-ui';

// 在根组件放置 PortalHost（ThemeProvider 内部）
<PortalHost />

// 在任意子组件中传送内容到根层级
<Portal>
  <View style={StyleSheet.absoluteFill}>
    <Modal />
  </View>
</Portal>

默认 Token

import { lightTokens, darkTokens } from '@unif/react-native-ui';

console.log(lightTokens.primary);                   // '#18181b'
console.log(lightTokens.radius);                    // 6
console.log(lightTokens.space4);                    // 16
console.log(lightTokens.animation.durationNormal);  // 250

兼容性

| @unif/react-native-ui | React Native | 状态 | |------------------------|-------------|------| | 1.5.0 | >= 0.78.0 | ✅ 当前版本 |

License

MIT