在React Native中引入antd-mobile-rn

Ant Design Mobile终于推出了React Native版本,但是使用起来依然比较麻烦。对于我个人而言,平时做项目也只用其中的几个组件。而无论是antd-mobile还是antd-mobile-rn,按需加载都比较麻烦。所以本文主要记录如何以按需引入的方式使用antd-mobile-rn

官方描述

  • UI 样式高度可配置,拓展性更强,轻松适应各类产品风格
  • 基于 React Native 的 iOS / Android / Web 多平台支持,组件丰富、能全面覆盖各类场景 (antd-mobile)
  • 提供 "组件按需加载" / "Web 页面高清显示" / "SVG Icon" 等优化方案,一体式开发
  • 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发
  • 全面兼容 react / preact

安装

npm install antd-mobile-rn --save

设置按需引入

安装babel-plugin-import

npm install babel-plugin-import --save-dev

将项目根目录的.babelrc中替换为如下内容:

{
  "presets": ["react-native"],
  "plugins": [
    ["import", { "libraryName": "antd-mobile-rn" }] // The difference with the Web platform is that you do not need to set the style
  ],
  "env": {
    "development": {
      "plugins": [
        "transform-react-jsx-source"
      ]
    }
  }
}

使用举例

引入Toast组件:

import { Toast } from 'antd-mobile-rn

将最新的文章发送到你的邮箱

展示评论