antd-mobile使用

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建立的项目中都有效,应该是他们的配置中都有相关的配置).