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

引言

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

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

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

二、为什么是 GlueStack UI

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

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

  1. 看官网, 整体组件看得顺眼(整体 UI 还是挺好看的)
  1. 使用 Tailwind CSS (NativeWind) 制作的 UI 组件库, 所以原生支持 NativeWind 特性

  2. 按需加载, 只安装我们需要的组件, 同时通过从 Gluestack UI 组件库复制组件, 快速集成预构建的高质量组件的同时, 可允许我们轻松使用 Tailwind CSS (NativeWind) 类进行自定义, 完全掌控代码, 实现无限自定义。从美观到交互行为, 精准定制每个 UI 组件和元素

三、配置

安装还是很简单的, 我这里是直接执行官方提供的命令

sh 复制代码
npx gluestack-ui init

该命令会自动检测你项目的环境, 然后自动化安装配置的

剩下就是一路回车, 安装完即可

安装完成后, 发现生成的配置, 会和现有的配置出现冲突情况, 手动解决一下就行

四、使用

由于是按需加载的, 所以我们需要在每次使用新的组件时, 调用官方 CI 命令, 来安装组件:

js 复制代码
npx gluestack-ui add button

如下截图, 实际上每次我们安装组件, 都会将组件从组件库中复制到我们自己的项目下:

组件的使用, 就按官方文档来即可:

jsx 复制代码
import { Button, ButtonText } from "@/components/ui/button"

function Example() {
  return (
    <Button size="md" variant="solid" action="primary">
      <ButtonText>Hello World!</ButtonText>
    </Button>
  )
}

上面代码最终效果如下:

五、参考

相关推荐
musk12129 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿2 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录2 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css