文档章节

antd-mobile使用

hezhongjie
 hezhongjie
发布于 2017/08/31 15:42
字数 589
阅读 159
收藏 0

antd-moblie的使用和antd的使用大体相同,相关配置文档和详细.

一下是使用中遇到的问题,且官网中并未明确说明.

1.在webpack.config中引入andt-mobile组件库:

['import', { libraryName: 'antd-mobile', style: true }]             

若组件的样式没有引入或引入错误,请尝试将其修改为 

['import', { libraryName: 'antd-mobile', style: 'css'}]

 

2.自定义svg图片已不再支持(https://github.com/ant-design/ant-design-mobile/pull/1740):因此配置中不必再设置svg-sprite-loader了,svg引用方式改为:<img src={svg的url}/>

注:实际使用中发现即使是组件库中内置的Icon也有可能无法显示,下面是我的测试结果:

dva-cli创建的项目:
   1. svg显示结果:
       -----------------------------------------------------------------------------------
       roadhog配置      不配置      配置svgSpriteLoaderDirs项        svgSpriteLoaderDirs
                                   (只处理antd-mobile中的svg)       (处理antd-mobile和自定义的Icon)
       --------------------------------------------------------------------------------------
       Icon(内置)        不显示         正常                                    正常
       ----------------------------------------------------------------------------------------
       Icon(自定义svg)      不显示         不显示                                  不显示
        --------------------------------------------------------------------------------------
        img标签使用svg         正常           正常                                    不显示
       ----------------------------------------------------------------------------------------
    暂时认为:在dva-cli中为了更好的使用svg,设置svgSpriteLoaderDirs(只处理antd-mobile);自定义svg全部使用img中;
   2.页面js稍大,
   3.官方似乎更推荐使用 create-react(-native)-app进行创建项目

   create-react-app :
    -----------------------------------------------------------------------------------
      无                无         (只处理antd-mobile中的svg)    (处理antd-mobile和自定义的Icon)
     ---------------------------------------------------------------------------------------
     Icon(内置)        不显示        不显示                                 不显示
     ----------------------------------------------------------------------------------------
     Icon(自定义svg)   不显示         不显示                                不显示
     --------------------------------------------------------------------------------------
     img标签使用svg     正常          正常                                   正常
     ----------------------------------------------------------------------------------
    create-react-app中:svg只能自己下载,使用本地的了.

3.全局状态管理:

    1.使用dva-cli创建的项目会有module层,用来统一管理state;

    2.使用create-react-app创建的项目没有默认的module层,因此若想保留一些全局的state和操作全局state的方法,需要在rootRouter中把全局state和操作方法作为参数统一传入childrenRouter中,

4.缩小打包体积:

    在开发单页面应用时,当多个"页面"引用了相同的组件时,会在每个页面中都打包一次,造成文件的体积变大; 但是当这个组件也在rootRouter中引用时,则只会打包进bundle.js中,其他页面中将不会重复打包,将明显减小每个页面的体积(此方法在dva-cil和create-react-app创建的项目中都有效,应该是他们的配置中都有相关的配置).

© 著作权归作者所有

共有 人打赏支持
hezhongjie
粉丝 4
博文 101
码字总数 47545
作品 0
程序员
搭建我的网站的mobile版的开发环境

image.png 之前我已经搭建过一个开发移动web的react开发环境,在那时我就已经想把我的极客教程弄一个手机上体验好的web app,无奈公司业务太多,整天忙着赶项目,下班回去的时候疲惫不堪,已...

极客教程
2017/10/09
0
0
React-Native antd-mobile-rn组件库集成使用

github地址 https://github.com/ant-design/antd-mobile-samples/tree/master/create-react-native-app 文档地址: https://rn.mobile.ant.design/docs/react/introduce-cn 集成 1. 安装ant......

大灰狼的小绵羊哥哥
09/06
0
0
React Router v4相关

最近在用react router v4,记录一下 基本配置 结合Antd Mobile的 TabBar 主要想法就是TabBar调的页面不用上路由,直接就组件的切换,固定为路由 image.png 各个分页面的里面页面分别搞路由 然...

治电小白菜
03/19
0
0
喜大普奔,Ant Design of Vue 1.0版本发布🎉🎉🎉

vue-antd-ui是一个站在巨人(antd)肩膀上的UI组件库,有着其它组件库没有的优势,几乎继承了antd所有的功能特点,自带antd各种buff。 vue-antd-ui诞生于17年9月份,18年3月份正式开源,800多次...

zeka
07/24
0
0
少写css, 早下班! Antd完成todo-list样式布局

Antd是一个UI组件库, 与React非常搭 善用UI库, 可以节省写css样式的时间 如果我们把写css的时间压缩一大半, 或许就可以早点下班了~ 关于Antd Antd官网 Antd Github地址: https://github.com/...

木子昭
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C++基础知识

链接:https://zhuanlan.zhihu.com/p/38399566 本文主要提一下以下三个区别: 引用必须初始化,而指针可以不初始化。 我们在定义一个引用的时候必须为其指定一个初始值,但是指针却不需要。 ...

悲催的古灵武士
21分钟前
0
0
Oracle备份脚本,保留10天数据

@echo off echo 删除10天前的备分文件和日志forfiles /p "D:\oracleback\backfile" /m *.dmp /d -10 /c "cmd /c del @path" forfiles /p "D:\oracleback\backfile" /m *.log /d -10......

lyle_luo
23分钟前
0
0
window版mysql备份数据

@echo off ::title name title db_backup ::color is green COLOR 2 ::defined value set yy=%date:~0,4% set mm=%date:~5,2% set dd=%date:~8,2% if /i %time:~0,2% lss 10 set hh=0%time:~......

恋码之子
26分钟前
0
0
hashmap嘿嘿嘿

1、jdk1.7 数组加链表 2、链表存放数据:hashcode相同,Entry{key:键 value:值 next:下一个节点} 3、取模算法,计算出存放数组的下标 int index = key.hashCode()%tables.length;...

熊猫你好
38分钟前
0
0
ca证书创建和docker-api证书设置

openssl genrsa -aes256 -out ca-key.pem 4096 // 这一步的密码千万不能忘记,下面要用到 openssl req -new -x509 -days 3650 -key ca-key.pem -sha256 -out ca.pem# 国家:CN# 省:.# 市......

chenbaojun
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部