shadcn能用在React Native上嗎?
我一直主要通过网页开发将想法变为现实。我喜欢发布一个应用是多么简单,以及可以多么快速地迭代它。
网络生态系统非常庞大,包含众多工具可供选择。这就是我为什么之前写过一篇关于我用来构建网页应用的技术栈的博客文章。
我今天用来构建Web应用的技术栈我目前使用的这套技术栈对我非常有用,帮助我更快地构建了Web应用。它可能不是最完美的,但它确实很管用!说到手机应用,我喜欢尽可能使用相同的开发工具和技术栈。所以我一直在用React Native做移动开发。这让我可以把网页开发中学到的东西用到移动开发上,比如用React和其它库。
然而,并不是所有的功能都像在网页开发中那样在React Native中都可用,特别是在用户界面方面。
我想用Tailwind和shadcn库来让我的生活更简单,但这些库在React Native中并不能直接使用,需要做一些工作。
这就是 Gluestack UI v2 的出场时机。它是一个提供与 shadcn 和 Tailwind CSS 类似方法的组件库,但专为 React Native 而设计。
gluestack: React 和 React Native 组件及模式可复制粘贴的通用、可访问且美观设计的组件及模式,使用 Tailwind CSS (NativeWind) 制作——gluestack.io让我再解释一下。
Tailwind CSS (一个渐进式框架) NativeWind (一个原生框架)如果你还不了解 Tailwind CSS,它是一个基于实用类的 CSS 框架,让你无需编写 CSS 即可构建自定义设计。它是一个很好的 web 开发工具,我已经用了一段时间了。
使用 Gluestack UI v2,在 React Native 中也可以使用相同的原则。这样你就可以将你在 Tailwind CSS 中用到的相同类应用到 React Native 的组件上。
比如:
这里有一个使用Gluestack UI的例子:
你在 Tailwind CSS 上学到的很多东西都可以用于 Gluestack 的移动开发中!我超喜欢的!
Shadcn 的复制粘贴式方法与其他 UI 库相比,shadcn 独特之处之一是其复制粘贴的特性。你可以直接复制网站上的代码,粘贴到你的项目里,它就能直接运行。
它给你整个组件,包括所有样式和其他细节。你可以随意调整以符合你的口味,代码归你所有。
Gluestack UI v2 也采用了相同的方法。你可以从网站复制代码,粘贴到你的项目中,它就可以正常工作。
或者更简单的是,你也可以使用他们的命令行工具直接通过命令行工具将组件添加到你的项目中。类似于shadcn CLI工具。
这里有个例子,比如说:
这是另一个部分:
就是这么简单!
结论我已经用Gluestack UI一段时间了,甚至在v2发布前就开始用了。我还有一项v1的项目,仍然运行正常。我还能用一样的组件,只是暂时还不能用Tailwind CSS的方法。
但是,现在有了 Gluestack UI v2,我可以使用和 web 开发中一样的方法来进行移动开发。这真的是一个很好的工具,可以加入到你的工具箱里。
我喜欢它用起来多简单,它让我的日子更轻松。现在我可以专心做我的APP,不用再为界面操心。去看看他们的组件吧!
Gluestack UI 提供了超过30个响应式组件,适用于各种屏幕和风格gluestack.io希望这也能帮助你在移动开发旅程中顺利进行,就像它帮助了我。虽然它不完美,但这是很好的起点,也是你技术栈中的重要补充。
一如既往,如果你有任何疑问或意见,可以在下面留言。我很希望能听到你的意见。
谢谢你阅读。希望这能在你的旅途中帮到你!❤️
一个用简单英语解释的内容 🚀感谢你加入In Plain English社区!在你离开之前,
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章