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"

}

}