引言
在现代前端开发中, 组件化开发早已成为主流。从最早的 Bootstrap 到 Ant Design、Material UI, 再到支持多端的 NativeBase 组件库的演进极大提升了开发效率和界面一致性, 也逐渐成为衡量团队前端工程能力的重要标准之一。
组件库为何如此关键? 对于一个项目来说, 选对组件库就像打下了良好的地基。它不仅决定了开发体验, 还影响着:
- 开发效率: 高质量的组件库能大幅减少重复造轮子, 让开发者专注于业务逻辑。
- 视觉一致性: 统一的设计规范与风格, 确保
UI一致性、整洁、美观、可维护。 - 可维护性与扩展性: 封装良好的组件减少了技术债, 方便团队协作与后期扩展。
- 跨平台支持: 对于多端项目, 跨平台组件库可以极大降低平台差异带来的开发负担。
而最近我在开发一个基于 React Native 的项目, 因此我开始调研并尝试使用一些现代的跨平台组件库。在对比了多款方案之后, 最终选择了 GlueStack UI ——一个现代、灵活, 且原生支持 Tailwind CSS(NativeWind) 样式体系的 React / React Native UI 组件库。
二、为什么是 GlueStack UI
GlueStack UI 就是新版 NativeBase 的 重塑版, 也可以理解为 NativeBase 的 下一代进化产品。
而之所以选择它, 无非以下几点原因:
- 看官网, 整体组件看得顺眼(整体
UI还是挺好看的)
-
使用
Tailwind CSS (NativeWind)制作的UI组件库, 所以原生支持NativeWind特性 -
按需加载, 只安装我们需要的组件, 同时通过从
Gluestack UI组件库复制组件, 快速集成预构建的高质量组件的同时, 可允许我们轻松使用Tailwind CSS (NativeWind)类进行自定义, 完全掌控代码, 实现无限自定义。从美观到交互行为, 精准定制每个UI组件和元素
三、配置
安装还是很简单的, 我这里是直接执行官方提供的命令
npx gluestack-ui init
该命令会自动检测你项目的环境, 然后自动化安装配置的
剩下就是一路回车, 安装完即可
安装完成后, 发现生成的配置, 会和现有的配置出现冲突情况, 手动解决一下就行
四、使用
由于是按需加载的, 所以我们需要在每次使用新的组件时, 调用官方 CI 命令, 来安装组件:
npx gluestack-ui add button
如下截图, 实际上每次我们安装组件, 都会将组件从组件库中复制到我们自己的项目下:
组件的使用, 就按官方文档来即可:
import { Button, ButtonText } from "@/components/ui/button"
function Example() {
return (
<Button size="md" variant="solid" action="primary">
<ButtonText>Hello World!</ButtonText>
</Button>
)
}
上面代码最终效果如下:
