Tapas UI

一个现代化的 React Native UI 组件库，支持 Web 和移动端。

🚀 特性

• 🎨 丰富的 UI 组件
• 📱 React Native 原生支持
• 🌐 Web 兼容性
• 🎯 TypeScript 支持
• 🎭 主题系统
• 📖 Storybook 文档

📦 安装

npm install @beppla/tapas-ui
# 或
yarn add @beppla/tapas-ui

🔧 依赖要求

必需依赖

{
  "dependencies": {
    "react": "^18.0.0",
    "react-native": "^0.70.0"
  }
}

Web 环境依赖

如果您在 Web 环境中使用，需要安装以下依赖：

npm install react-native-web react-native-vector-icons
# 或
yarn add react-native-web react-native-vector-icons

⚠️ 关于图表组件的警告信息

如果您在 React Native 项目中看到关于 react-wordcloud 或 recharts 的警告，请参阅 WEB_DEPENDENCIES.md 了解详情。这些警告不会影响应用功能。

图标支持

组件库使用 react-native-vector-icons 提供图标支持。在 Web 环境中，您可能需要额外的配置：

# 安装字体文件
npm install @expo/vector-icons
# 或
yarn add @expo/vector-icons

🎯 使用方法

import React from 'react';
import { TapasButton, TapasText } from '@beppla/tapas-ui';

const App = () => {
  return (
    <div>
      <TapasText>Hello Tapas UI!</TapasText>
      <TapasButton title="Click me" onPress={() => alert('Hello!')} />
    </div>
  );
};

🌐 Web 兼容性

已知问题

1. 图标组件: 在 Web 环境中，某些图标可能显示为文本占位符
2. 原生模块: 某些 React Native 特定功能在 Web 中不可用
3. 字体文件: 需要确保字体文件在 Web 环境中正确加载

解决方案

1. 安装 react-native-web 和相关依赖
2. 配置 Webpack 别名和 fallback
3. 使用提供的 Web 兼容组件

📚 文档

访问 Storybook 查看完整的组件文档和示例。

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🔗 相关链接

• React Native
• React Native Web
• Storybook