antd mobile v5 它悄悄的来了

Posted 2022-12-08 萧然似我

在 React 领域里，一直缺少一套靠谱、好用的移动端组件，蚂蚁的 antd mobile v2 年久失修，几乎无人维护，跟 antd 相差甚远，在设计上，也有很多也已经跟不再符合 Alipay Design^[1]。

激动人心的是，就在前两天，在 ant-design-mobile^[2] 的 discussions 里面已经发布了 5.0（白杨）的 Roadmap^[3]。

在 8 月 26 号晚上也已经宣布 v5 已经进入 beta。

image-20210827081425771

5.0（白杨） Roadmap

5.0（白杨） 是我们最新在开发的下一代 antd-mobile 组件库，经过近 5 个月的开发，已经覆盖了 48 个组件，并已在许多项目中落地使用。

我们最近发布了 alpha 版本的 npm 包^[4]，也部署了新的文档站点^[5]。坦白地讲，antd mobile 5.0 还并不够成熟，但我们希望能够尽早地推送给社区上的各位同学，也希望整个研发进程和规划尽可能地符合开源精神：透明、开放、合作。

所以，为了帮助大家更好地了解 5.0 版本，这里简单分享一下我们的思路和方向。

5.0 会带来什么

视觉规范

和 v3 v4 版本一致，v5 也将沿用最新版本的支付宝基础设计规范 Alipay Design^[6]。

手势和动画

v5 使用了 use-gesture^[7] 作为手势库、react-spring^[8] 作为动画库，具有更流畅细腻的手势交互和动画效果。

重新设计的 API

v5 所有的组件都是完全重写的，API 也是重新设计的，更现代化也更优雅。

拥抱 css 变量

css 变量提供了更加动态化的样式调整能力，也让组件的样式调整变得更加简洁优雅。在业务中对组件样式魔改是一件非常痛苦也非常难以维护的事情，我们希望通过 css 变量改变这一现状。

了解更多

如果你想了解如何使用，可以去这里^[9]

如果你想点点试试各种组件，可以去这里^[10]

此外，在这里^[11]我们汇总了一些常见问题，希望能帮到你

发布计划

“

这些里程碑只是我们大致的计划，随着项目的不断推进，可能会有所调整

”

Alpha

我们在 7 月 12 日发布了第一个 alpha 版本，经过了一个多月的不断迭代，API 渐渐趋于稳定。

Beta

我们预计将在近期开始推送 beta 版本，相较于 alpha 版本，beta 版本 API 更加稳定也更加完善。

在这个阶段我们还会增加更多的新组件：

• Swiper

• ImageUpload

• Sidebar

• Calendar

• Stepper

• SegmentedControl

• Skeleton

• NumberKeyboard

• SwipeAction

• Navbar

补充组件库的整体能力：

• 支持国际化

• 暴露出更多的 css 变量

• 逐步完善自动化测试

• 增加英文文档

• 支持无障碍

RC

我们预计将在 10 月开始推送 rc 版本，在这期间我们将几乎不会再引入新的 break change。

Release

我们预计在 11 月正式发布 5.0 版本。

最后

最后让我们期待 11 月，antd mobile v5 的正式发吧，另外如果你对 antd mobile v5 如果很有兴趣，欢迎去试用，然后参与 v5 的开发，欢迎提 PR。

“

悄悄的说一下我也是 v5 的贡献者，也是内部人员，后面会给大家带来更多的 antd mobile 的消息，欢迎关注、点赞。

”

参考资料

[1]

Alipay Design: https://design.alipay.com/

[2]

ant-design-mobile: https://github.com/ant-design/ant-design-mobile

[3]

5.0（白杨）的 Roadmap: https://github.com/ant-design/ant-design-mobile/discussions/3924

[4]

npm 包: https://www.npmjs.com/package/antd-mobile

[5]

文档站点: https://next.mobile.ant.design/

[6]

Alipay Design: https://design.alipay.com/

[7]

use-gesture: https://github.com/pmndrs/use-gesture

[8]

react-spring: https://github.com/pmndrs/react-spring

[9]

去这里: https://next.mobile.ant.design/guide/quick-start

[10]

去这里: https://next.mobile.ant.design/components/button

[11]

在这里: https://next.mobile.ant.design/guide/faq