Taro AtUI

一款基于 Taro 框架开发的多端 UI 组件库，在 Taro UI 基础上进行设计风格升级，并深度优化 React Native 平台兼容性。

✨ 特性

• 🚀 多端适配 - 一套组件可在微信小程序、支付宝小程序、百度小程序、H5、React Native 等多端运行
• 🎨 设计升级 - 基于 Taro UI 进行设计风格升级，界面更现代化
• 📱 RN 优化 - 更好地兼容 React Native，提供原生体验
• 🛠️ TypeScript - 完整的 TypeScript 类型定义
• 📦 按需加载 - 支持按需引入，减小包体积
• 🔧 易于使用 - 友好的 API 设计，灵活的组件配置

📦 安装

npm

npm install taro-atui

yarn

yarn add taro-atui

pnpm

pnpm add taro-atui

🚀 快速开始

在代码中 import 需要的组件并按照文档说明使用：

import { AtButton, AtCard, AtIcon } from 'taro-atui'

export default function App() {
  return (
    <View>
      <AtCard title="卡片标题">
        <AtButton type="primary">
          <AtIcon value="heart" size="16" />
          点击按钮
        </AtButton>
      </AtCard>
    </View>
  )
}

📱 支持平台

| 平台 | 支持状态 | 说明 | |------|---------|------| | 微信小程序 | ✅ | 完全支持 | | 支付宝小程序 | ✅ | 完全支持 | | 百度小程序 | ✅ | 完全支持 | | 字节跳动小程序 | ✅ | 完全支持 | | QQ 小程序 | ✅ | 完全支持 | | 京东小程序 | ✅ | 完全支持 | | H5 | ✅ | 完全支持 | | React Native | ✅ | 优化支持 |

🎯 组件列表

基础组件

• AtButton - 按钮
• AtIcon - 图标
• AtFab - 悬浮按钮

视图容器

• AtCard - 卡片
• AtAccordion - 手风琴
• AtFloatLayout - 浮动弹层
• AtDrawer - 抽屉
• AtModal - 模态框
• AtCurtain - 幕帘

导航组件

• AtNavBar - 导航栏
• AtTabBar - 标签栏
• AtTabs - 标签页
• AtSegmentedControl - 分段器
• AtPagination - 分页器
• AtIndexes - 索引选择器

表单组件

• AtInput - 输入框
• AtInputNumber - 数字输入框
• AtTextarea - 多行文本框
• AtRadio - 单选框
• AtCheckbox - 复选框
• AtSwitch - 开关
• AtRate - 评分
• AtSlider - 滑动条
• AtRange - 范围选择器
• AtImagePicker - 图片选择器
• AtSearchBar - 搜索栏
• AtForm - 表单

布局组件

• AtFlex - 弹性布局
• AtGrid - 栅格
• AtList - 列表
• AtSwipeAction - 滑动操作

反馈组件

• AtToast - 轻提示
• AtMessage - 消息通知
• AtProgress - 进度条
• AtActivityIndicator - 活动指示器
• AtLoadMore - 加载更多
• AtLoading - 加载中

展示组件

• AtAvatar - 头像
• AtArticle - 文章样式
• AtBadge - 徽标数
• AtNoticebar - 通告栏
• AtTag - 标签
• AtTimeline - 时间轴
• AtSteps - 步骤条
• AtCountdown - 倒计时
• AtDivider - 分割线

高级组件

• AtCalendar - 日历
• AtActionSheet - 动作面板

📖 文档

详细的组件文档和使用示例请访问：文档地址

🔗 相关链接

• Taro 官方文档
• Taro UI 原版
• React Native 官网

🤝 贡献

我们欢迎所有的贡献。请先阅读我们的贡献指南。

如果你在使用过程中遇到问题，或者有好的建议，欢迎给我们提 Issue 或 Pull Request。

开发

# 克隆项目
git clone https://github.com/CreativeMiniApp/taro-atui.git

# 安装依赖
cd taro-atui
pnpm install

# 开发模式
pnpm dev

# 构建
pnpm build

# 代码检查
pnpm lint

# 运行测试
pnpm test

📄 更新日志

详细的更新日志请查看 CHANGELOG.md

📝 许可证

本项目基于 MIT 许可证开源。

🙏 致谢

感谢 Taro UI 团队提供的优秀基础，本项目在其基础上进行了设计升级和功能增强。