antd-react-mobile(踩坑記錄)

1.按照官網步驟進行，

$ npm install -g create-react-app

# 注意：工具會自動初始化一個腳手架並安裝 React 項目的各類必要依賴，若是在過程當中出現網絡問題，請嘗試配置代理或使用

其餘 npm registry。

$ create-react-app my-app

$ cd my-app

$ npm install antd-mobile --save

入口頁面 (html 或 模板) 相關設置：

< script src= "https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js" > < / script >

< script >

if ( 'addEventListener' in document) {

document. addEventListener( 'DOMContentLoaded', function() {

FastClick. attach( document. body);

}, false);

}

if(! window. Promise) {

document. writeln( '<script src="https://as.alipayobjects.com/g/component/es6-promise

/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');

}

< / script >

 按需加載#

• 引入 react-app-rewired 並修改 package.json 裏的啓動配置: 

 $ npm install react-app-rewired --save-dev

/* package.json */

"scripts": {

- "start" : "react-scripts start",

+ "start" : "react-app-rewired start",

- "build" : "react-scripts build",

+ "build" : "react-app-rewired build",

- "test" : "react-scripts test --env=jsdom",

+ "test" : "react-app-rewired test --env=jsdom",

}

 而後在項目根目錄建立一個 config-overrides.js 用於修改默認配置。

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

const { injectBabelPlugin } = require( 'react-app-rewired');

module. exports = function override( config, env) {

config = injectBabelPlugin([ 'import', { libraryName: 'antd-mobile', style: 'css' }], config);

return config;

};

全部步驟進行以後，恭喜你，踏入react-mobile第一坑，報錯：

The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins 

  

緣由： react-scripts 升級到 2.1.2 之後破壞了 react-app-rewired;而後 react-app-rewired 升級到 2.x 之後直接幹掉了全部 helpers。react-scripts 升級到 2.1.2 之後破壞了 react-app-rewired;而後 react-app-rewired 升級到 2.x 之後直接幹掉了全部 helpers。

 解決方法：把react-app-rewired 進行降級後能夠了，即

$ yarn add react-app-rewired@2.0.2-next.0

 安裝低版本的react-app-rewired之後，從新npm install，再運行yarn start，便可解決問題，實現antd按需引入

 

 2.使用antd-mobile的InputItem須要引入受控組件rc-form

npm install rc-form

可是安裝過程當中報錯，查看官網，更新在9天前，應該是新版本兼容問題

解決辦法： npm install rc-form@2.4.0 

 

3. antd-mobile的Menu添加路由

咱們都知道，點擊Menu的時候，但願連接更改，頁面跳轉

可是點擊Menu的時候，沒法使用

之因此沒法使用，是由於這個導航組件不是經過路由跳轉過來的，他的父級纔是路由跳轉過來的 

this. props. history. push( `/ ${ menuId } `)

這時候，咱們須要用到withRouter 

 將withRouter 引入

import { withRouter } from 'react-router-dom'

 再將組建用withRouter封存

export default withRouter( Nav)

就可使用啦，具體用法直接百度

 

4.封裝單選組建

關於初衷爲何要封裝，是由於封裝以後能夠屢次使用，而來不會擠在一個頁面上，這樣看起來很嘈雜，結構不夠清晰

我封裝的是不受控的組建，更改選擇以後的值直接取自組建的state中，可是在表單中使用，卻取不到這個自定義組件的值了

查詢了官網以後，請看自定義表單控件https://ant.design/components/form-cn/#components-form-demo-customized-form-controls

使用到兩個onchange以後的函數

handleOk=( e) =>{

let { formList}= this. props

formList. value= e[ 0]

this. triggerChange(... e);

}

triggerChange = ( changedValue) => {

const onChange = this. props. onChange;

if ( onChange) {

onChange( changedValue);

}

}

 即點擊肯定後，將值渲染到頁面，而後再將值傳出，以後咱們在用rc-form的getFieldProps方法輕鬆加愉快了

可是我遇到的是Picker組件總是報錯，說是裏面的選項未找到···

排查了一下，發現optionData即單選的選項有時候會是undefined，這是爲啥

原來我是先將總的數據傳到單選組件，而後再在組件中循環遍歷，加入label標籤，這樣的作法是不對的

應該如今頂層遍歷數據，加好label，而後再加判斷 optionData有值的時候再傳入這個組件，這樣就不會找不到選項數據了

 

5, antd-mobile的級聯組件一點都很差用額，不知足公司需求

需求是這樣的，點擊修改，彈出省的選擇，選擇省以後，再根據選擇的省級，加載市的數據，再根據市的選擇加載區的數據

而不是一古腦兒的把數據傳給你，這樣數據會很龐大，（即便不龐大，公司給的接口是這樣，我也沒有辦法，gucci~~）

既然如此，只能本身寫了，雖然寫的很爛，可是能用就行了

這裏用到了 antd-mobile的Tag和Radio

作好的效果如圖

 

 效果仍是能夠的，哈哈哈，選完以後，點擊前面的tag，彈出相應的可修改，後面的置灰不可點擊

具體代碼請看https://github.com/copperfield013/react_datamobile/blob/master/src/components/CasePicker/index.js 

 

6.多選框或是抽屜，或是Menu的穿透問題 （兼容安卓和IOS）

做爲移動端，爲了用戶體驗，確定會用到相似的一些彈出框，antd的組件雖然幫咱們處理了一些，可是我發現ios上仍是有穿透問題，即彈出內容後，背後的頁面仍是會隨着指尖滑動而滑動，這是怎麼肥四？？

其實很簡單，先定義一個阻止默認行爲的函數：

bodyScroll=( e) =>{ e. preventDefault();}

任何在多選框或是抽屜彈出時：

document. addEventListener( 'touchmove', this. bodyScroll, { passive: false})

當關閉內容時，再將設置恢復如初就ok了：

document. removeEventListener( 'touchmove', this. bodyScroll, { passive: false})

 

7.標題置頂Bug，這個不是antd-mobile的bug，可是也記錄下

 收到的需求是這樣的，向上滑動，滑到某一塊，某一塊的標題置頂

這麼簡單的小小功能用fixed作不就完了嘛，有什麼難度 

 

 可是當我完成效果的時候，發現有一個小bug，當標題置頂切換的時候，出現了閃動，這是怎麼回事？？

 原來設置了fixed的元素脫離了文檔流，使得獲取判斷的offsetTop的值不斷的發生變化，進而會出現閃動

解決方法，fixed既然脫離了文檔流，不就是少了一塊嘛，手動加上即是

在每一模塊下面添加一個高度與標題同樣的空的div，設置display爲none，

當滾動到特定高度時，標題置頂脫離文檔流的同時，設置該模塊下的空div的display：block，這就完事兒啦！！！

handleScroll=() =>{

const { scrollIds}= this. state

const scrollY= window. scrollY

const mainTopArr = [];

         let k= 0;

         if( scrollIds){   //滑動鎖定導航

             for( let i= 0; i< scrollIds. length; i++){

let node= document. getElementById( scrollIds[ i])

                 if( node){

                     let top = Math. floor( node. offsetTop)    

                     mainTopArr. push( top);

                }       

            }

mainTopArr. sort(( a, b) => a- b) //排序

const fixedDiv= document. getElementsByClassName( "fixedDiv")

             for( let i= 0; i< mainTopArr. length; i++){

                 if( scrollY> mainTopArr[ i]){

k= i

for( let i= 0; i< fixedDiv. length; i++){

fixedDiv[ i]. style. display= "none"

}

fixedDiv[ k]. style. display= "block"

}

if( scrollY<= 10){

k=- 1

for( let i= 0; i< fixedDiv. length; i++){

fixedDiv[ i]. style. display= "none"

}

}

}

}

const lis= document. getElementsByClassName( "am-list-header")

if ( lis && k>=0 ){

for( let i= 0; i< lis. length; i++){

lis[ i]. style. position= "static"

}

lis[ k]. style. position= "fixed"

}

}