@particle-network/ui-native

✨ 特性

• 📱 原生体验 - 遵循 iOS 和 Android 平台设计规范
• 🎨 统一设计 - 与 Web 端保持一致的设计语言
• 🚀 高性能 - 基于 React Native 优化的组件实现
• 🛡 TypeScript - 完整的类型定义支持
• 📦 丰富组件 - 覆盖常见移动端场景的组件库
• 🎯 Expo 支持 - 完美支持 Expo 开发工作流

📦 安装

使用 Expo (推荐)

expo install @particle-network/ui-native

使用 React Native CLI

# npm
npm install @particle-network/ui-native

# yarn
yarn add @particle-network/ui-native

安装依赖

某些组件需要额外的原生依赖：

# 必需依赖
expo install react-native-gesture-handler react-native-reanimated react-native-safe-area-context

# 可选依赖（根据使用的组件）
expo install react-native-svg expo-haptics

🚀 快速开始

基础设置

在应用入口包裹 Provider：

import { UXProvider } from '@particle-network/ui-native';

export default function App() {
  return (
    <UXProvider>
      <YourApp />
    </UXProvider>
  );
}

使用组件

import { VStack, UXButton, UXInput, UXSwitch } from '@particle-network/ui-native';
import { View } from 'react-native';

function LoginScreen() {
  const [rememberMe, setRememberMe] = useState(false);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <VStack spacing='md'>
        <UXInput placeholder='用户名' autoCapitalize='none' />
        <UXInput placeholder='密码' secureTextEntry />
        <UXSwitch value={rememberMe} onValueChange={setRememberMe} label='记住我' />
        <UXButton color='primary' onPress={() => console.log('登录')}>
          登录
        </UXButton>
      </VStack>
    </View>
  );
}

📚 组件列表

布局组件

• Box - 基础容器
• Center - 居中布局
• Circle - 圆形容器
• Square - 正方形容器
• Flex - 弹性布局
• HStack - 水平堆叠
• VStack - 垂直堆叠

表单组件

• UXButton - 按钮
• UXInput - 输入框
• UXNumberInput - 数字输入
• UXCheckbox - 复选框
• UXRadio - 单选框
• UXSwitch - 开关

交互组件

• UXPressable - 可按压组件
• UXTouchableOpacity - 触摸反馈

反馈组件

• UXModal - 模态框
• UXTooltip - 工具提示
• UXHint - 提示信息

数据展示

• UXTabs - 标签页
• UXChip - 标签
• UXDivider - 分割线
• ProgressWrapper - 进度条
• Text - 文本组件

🎨 主题定制

使用主题

import { UXProvider } from '@particle-network/ui-native';
import { customTheme } from './theme';

export default function App() {
  return (
    <UXProvider theme={customTheme}>
      <YourApp />
    </UXProvider>
  );
}

自定义主题

const customTheme = {
  colors: {
    primary: '#1890ff',
    secondary: '#52c41a',
    danger: '#ff4d4f',
    warning: '#faad14',
    success: '#52c41a',
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32,
  },
  borderRadius: {
    sm: 4,
    md: 8,
    lg: 16,
  },
};

🔧 开发工具

Storybook

本项目集成了 Storybook，方便组件开发和测试：

# Web 版 Storybook（推荐用于开发）
yarn storybook:web

# 设备上的 Storybook
yarn storybook

# iOS
yarn storybook:ios

# Android
yarn storybook:android

开发命令

# 安装依赖
yarn install

# 启动开发
yarn start

# 构建库
yarn build

# 运行测试
yarn test

# 类型检查
yarn type-check

# 代码检查
yarn lint

📱 平台支持

| 平台 | 版本要求 | | ------------ | -------------- | | iOS | 13.0+ | | Android | 5.0+ (API 21+) | | Expo SDK | 48+ | | React Native | 0.71+ |

🎯 最佳实践

性能优化

import { memo } from 'react';
import { UXButton } from '@particle-network/ui-native';

// 使用 memo 优化组件
const OptimizedButton = memo(({ onPress, title }) => <UXButton onPress={onPress}>{title}</UXButton>);

响应式设计

import { useResponsive } from '@particle-network/ui-native';

function ResponsiveComponent() {
  const { isTablet } = useResponsive();

  return <VStack spacing={isTablet ? 'lg' : 'md'}>{/* 根据设备类型调整布局 */}</VStack>;
}

🤝 贡献

欢迎贡献代码！请查看贡献指南了解更多信息。

📄 许可证

MIT © UniversalX Team

🔗 相关链接

• 文档站点
• Storybook 演示
• GitHub 仓库
• NPM 包
• 更新日志

🙏 致谢

感谢以下开源项目：

• React Native
• Expo
• React Native Reanimated
• React Native Gesture Handler