Ant Design Mobile 5.6.0版本来了

痛定思痛。 2024-04-07 11:20 63阅读 0赞

### 一、Ant Design Mobile介绍 ###

Ant Design Mobile（ 官网地址：[Ant Design Mobile - Ant Design Mobile][] ） 是由支付宝设计团队基于蚂蚁集团的众多业务实践，亿万用户的验证反馈，抽象构建出的移动端资产库。希望可以帮助设计师们脑海中的 idea 轻松转变为自然好用的设计，给用户更真实自然的体验。

**Ant Design Mobile功能特性**：

**高性能**

无需配置，即可拥有最佳的包体积大小和最优的性能

**可定制**

基于 CSS 变量，可以灵活地调整组件外观或自由创造自己的主题

**原子化**

每个组件提供的功能，恰到好处地满足业务所需

**流畅**

拥有流畅的手势交互和细致的动画展示，助力打造极致体验

### 二、Ant Design Mobile版本更新 ###

**2022年2月21日** Ant Design Mobile5.0 首次进行发布，根据GitHub的描述，Ant Design Mobile5.0 版本是一次彻底的重做，它带来了全新的设计体验和 100% 重写的组件代码实现。

2022年2月21日-2022年3月12日，Ant Design Mobile在基于5.0版本的基础上再次更新了10个版本，截止到**2022年3月12日** Ant Design Mobile5.6.0也进行了发布。

**Ant Design Mobile5.6.0**

【特性】

【优化】 在 Cascader 和 CascaderView 当层级减少时，会自动选择到最后一个可选的层级

【修复】 Checkbox [&][Link 1]amp; Radio 调整了 onClick 的行为，修复了一些内部元素的点击事件无法被外层捕获的问题 修复了 Badge 内容如果为数字 0，会无法正常显示的问题 修复了 Modal Dialog ImageViewer ActionSheet 组件调用 show() 后如果立即调用 close() / clear() 可能会无法正确地关闭弹层的问题

那目前我们是否可以在项目中直接使用**Ant Design Mobile5.6.0**版本呢？

引用Ant Design Mobile GitHub中解释：

5.0 版本已经在蚂蚁、阿里、菜鸟的诸多线上项目中落地使用，经过了非常复杂全面的使用场景的考验。我们相信对于新项目，现在直接使用 5.0 版本，并持续地跟进我们后续的升级，是毋庸置疑的最优选择。

不难看出，**Ant Design Mobile5.6.0**是可以项目开发中直接使用的。

### 三、Ant Design Mobile 使用 ###

#### 1、安装 `create-react-app` 脚手架 ####

因为 Ant Design Mobile 是基于React的移动端组件库，首先我们需要安装好 React官方提供的脚手架 `create-react-app`

> 注意：如果你之前通过`npm install -g create-react-app`全局安装过`create-react-app`，建议你使用`npm uninstall -g create-react-app`或`yarn global remove create-react-app`卸载该包，以确保npx始终使用最新版本。
> 
> `create-react-app`安装命令：
> 
>     // 全局安装
>     npm install -g create-react-app
>     // 检查版本
>     create-react-app --version
> 
> 如果能够出现 `create-react-app`版本号，说明安装成功（注意：由于`create-react-app`在 2021-12-14更新到5.0.0版本，所以我们目前安装的是最新版本）
> 
> ![2d5622d1b42a1f5aba99823421c901dc.png][]

#### 2、通过`create-react-app`创建项目 ####

`create-react-app`创建项目命令如下：

> 以下选择 `npx` 或 `npm` 或 `yarn`命令创建

(1)、使用npx命令创建

# 创建项目，注意：这里创建项目是 npx 而不是npm
    npx create-react-app my-app
    
    # 切换到项目中
    cd my-app
    # 启动创建好的项目
    npm start

(2)、使用npm命令创建

# 创建项目
    npm init react-app my-app
    # 切换到项目中
    cd my-app
    # 启动创建好的项目
    npm start

(3)、使用yarn命令创建

# 创建项目
    yarn create react-app my-app
    # 切换到项目中
    cd my-app
    # 启动创建好的项目
    yarn start

启动创建的好的项目，就可以再浏览器中显示如下图所示内容：

![11a3b69e5b2f6e5fc2d93e59ef9bb48e.png][]

创建好的目录结构如下图所示：

#### 3、安装 Ant Design Mobile5.6.0 ####

安装命令如下：

npm install --save antd-mobile@5.6.0
    # or
    yarn add antd-mobile@5.6.0

#### 4、使用Ant Design Mobile5.6.0中的组件 ####

APP.js

import logo from './logo.svg'
    import './App.css'
    import React from 'react'
    // 引入 button组件 
    import { Button } from 'antd-mobile'
    
    function App() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
    {/* button组件的使用 */}
           <Button color="primary">Primary</Button>
         </header>
       </div>
    )
    }
    
    export default App

浏览器中显示如下图所示：

![faf9ffb718b21f7ba7ab01e3cd8b63ca.png][]

打开浏览器调试器，打开浏览器的移动端调试工具，显示如下图所示：

![f2abcff0cf3d6dcb32e67cf6ad1b7248.png][]

在线体验地址：

[antd-mobile - CodeSandbox][]

![8590d2f926439ba23122034de6e1ed33.png][]

其它组件的使用可以继续参考 Ant Design Mobile中的说明进行使用。

### 四、结束语 ###

以上是关于Ant Design Mobile5.6.0的版本更新说明和使用。

*   *  TabBar.Item 的 title 属性现在支持渲染函数动态生成内容了
     *  FloatingBubble 增加了 --background CSS 变量
     *  ActionSheet 增加了 popupClassName 和 popupStyle 属性 \#4910

[Ant Design Mobile - Ant Design Mobile]: https://mobile.ant.design/zh
[Link 1]: https://www.boxuegu.com/news/184.html
[2d5622d1b42a1f5aba99823421c901dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d81cd11cc6e0458aa0b5a493da05fadc.png
[11a3b69e5b2f6e5fc2d93e59ef9bb48e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6376bbddc48d43beaca39b7cb761ab21.png
[faf9ffb718b21f7ba7ab01e3cd8b63ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/8a2caad1158544fd86535b36f29b0dd6.png
[f2abcff0cf3d6dcb32e67cf6ad1b7248.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7a7342c9e36f43a1b8deed8c75ae9ecb.png
[antd-mobile - CodeSandbox]: https://codesandbox.io/s/antd-mobile-snrxr?file=/src/App.tsx
[8590d2f926439ba23122034de6e1ed33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/19a9222f74464d599117ca221bd822a3.png