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建立的項目中都有效,應該是他們的配置中都有相關的配置).