React Native 跨平台组件库实践: GlueStack UI 上手指南

引言

在现代前端开发中, 组件化开发早已成为主流。从最早的 Bootstrap 到 Ant Design、Material UI, 再到支持多端的 NativeBase 组件库的演进极大提升了开发效率和界面一致性, 也逐渐成为衡量团队前端工程能力的重要标准之一。 组件库为何如此关键? 对于一个项目来说, 选对组件库就像打下了良好的地基。它不仅决定了开发体验, 还影响着:

• 开发效率: 高质量的组件库能大幅减少重复造轮子, 让开发者专注于业务逻辑。
• 视觉一致性: 统一的设计规范与风格, 确保 UI 一致性、整洁、美观、可维护。
• 可维护性与扩展性: 封装良好的组件减少了技术债, 方便团队协作与后期扩展。
• 跨平台支持: 对于多端项目, 跨平台组件库可以极大降低平台差异带来的开发负担。

而最近我在开发一个基于 React Native 的项目, 因此我开始调研并尝试使用一些现代的跨平台组件库。在对比了多款方案之后, 最终选择了 GlueStack UI ------一个现代、灵活, 且原生支持 Tailwind CSS(NativeWind) 样式体系的 React / React Native UI 组件库。

二、为什么是 GlueStack UI

GlueStack UI 就是新版 NativeBase 的 重塑版, 也可以理解为 NativeBase 的 下一代进化产品。

而之所以选择它, 无非以下几点原因:

1. 看官网, 整体组件看得顺眼(整体 UI 还是挺好看的)

2. 使用 Tailwind CSS (NativeWind) 制作的 UI 组件库, 所以原生支持 NativeWind 特性

3. 按需加载, 只安装我们需要的组件, 同时通过从 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>
  )
}

上面代码最终效果如下:

五、参考

• gluestack.io/ui/Installa...
• gluestack.io/ui/docs/com...
• React Native 跨平台组件库选择与评估