用途:在 Taro 项目中集成、配置或排查 taro-ui,选择与组合组件、查 Props、写示例页面,以及自定义主题、国际化和按需加载。
版本与安装:Taro < 3 用 taro-ui@2.3.4,Taro ≥ 3 用 taro-ui@latest。安装命令:pnpm add taro-ui 或 npm install taro-ui@latest。Peer 依赖包括 @tarojs/taro、@tarojs/components、@tarojs/react、react、react-dom(≥16.13);RN 端另需 react-native、react-native-modal(可选)。微信小程序需基础库 ≥ 2.2.3。
Taro 必配:H5 需在 config 中设置 h5.esnextModules: ['taro-ui'];Taro 3.5+ 需在 compiler.prebundle.exclude 中加入 'taro-ui',否则页面可能异常。
样式:样式位于 taro-ui/dist/style/,不会自动注入,必须显式引入。全量引入 import 'taro-ui/dist/style/index.scss';按需引入 @import 'taro-ui/dist/style/components/button.scss',或用 babel-plugin-import 配置。At 前缀去掉后即目录名,如 AtActionSheet → action-sheet。
组件用法:import { AtButton } from 'taro-ui',组件以 At 前缀导出。公共 Props 有 className、customStyle、children。复合组件如 AtModal + AtModalHeader/Content/Action、AtList + AtListItem、AtTabs + AtTabsPane。命令式 API 需挂载 <AtMessage /> 后调用 Taro.atMessage。
国际化:使用 ConfigProvider 传入 locale(内置 zhCN、enUS),优先级为组件 props > ConfigProvider.locale > 默认 zhCN。
主题:推荐在引入默认样式前覆盖 SCSS 变量,如 $color-brand;也可用 globalClass 或 customStyle。AtSlider、AtSwitch 暂不支持 SCSS 变量覆盖主题。
限制:资料未提供具体收费、价格与效果信息;部分组件能力以官方文档和类型定义为准。