1.按照官網(wǎng)步驟進(jìn)行，

$ npm install -g create-react-app

# 注意：工具會(huì)自動(dòng)初始化一個(gè)腳手架并安裝 React 項(xiàng)目的各種必要依賴，如果在過程中出現(xiàn)網(wǎng)絡(luò)問題，請嘗試配置代理或使用

其他 npm registry。

$ create-react-app my-app

$ cd my-app

$ npm install antd-mobile --save

入口頁面 (html 或 模板) 相關(guān)設(shè)置：

<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 里的啟動(dòng)配置:?

?$ 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",}

?然后在項(xiàng)目根目錄創(chuàng)建一個(gè) config-overrides.js 用于修改默認(rèn)配置。

?$ 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;};

所有步驟進(jìn)行之后，恭喜你，踏入react-mobile第一坑，報(bào)錯(cuò)：

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 升級(jí)到 2.1.2 以后破壞了 react-app-rewired;然后 react-app-rewired 升級(jí)到 2.x 以后直接干掉了所有 helpers。react-scripts 升級(jí)到 2.1.2 以后破壞了 react-app-rewired;然后 react-app-rewired 升級(jí)到 2.x 以后直接干掉了所有 helpers。

?解決方法：把react-app-rewired 進(jìn)行降級(jí)后可以了，即

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

?安裝低版本的react-app-rewired以后，重新npm install，再運(yùn)行yarn start，即可解決問題，實(shí)現(xiàn)antd按需引入

?

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

npm install rc-form

但是安裝過程中報(bào)錯(cuò)，查看官網(wǎng)，更新在9天前，應(yīng)該是新版本兼容問題

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

?

3.?antd-mobile的Menu添加路由

我們都知道，點(diǎn)擊Menu的時(shí)候，希望鏈接更改，頁面跳轉(zhuǎn)

但是點(diǎn)擊Menu的時(shí)候，無法使用

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

這時(shí)候，我們需要用到withRouter?

?將withRouter?引入

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

?再將組建用withRouter封存

export default withRouter(Nav)

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

?

4.封裝單選組建

關(guān)于初衷為什么要封裝，是因?yàn)榉庋b之后可以多次使用，而來不會(huì)擠在一個(gè)頁面上，這樣看起來很嘈雜，結(jié)構(gòu)不夠清晰

我封裝的是不受控的組建，更改選擇之后的值直接取自組建的state中，但是在表單中使用，卻取不到這個(gè)自定義組件的值了

查詢了官網(wǎng)之后，請看自定義表單控件https://ant.design/components/form-cn/#components-form-demo-customized-form-controls

使用到兩個(gè)onchange之后的函數(shù)

handleOk=(e)=>{ let {formList}=this.props formList.value=e[0] this.triggerChange(...e);}triggerChange = (changedValue) => { const onChange = this.props.onChange; if (onChange) { onChange(changedValue);}}

?即點(diǎn)擊確定后，將值渲染到頁面，然后再將值傳出，之后我們在用rc-form的getFieldProps方法輕松加愉快了

但是我遇到的是Picker組件老是報(bào)錯(cuò)，說是里面的選項(xiàng)未找到···

排查了一下，發(fā)現(xiàn)optionData即單選的選項(xiàng)有時(shí)候會(huì)是undefined，這是為啥

原來我是先將總的數(shù)據(jù)傳到單選組件，然后再在組件中循環(huán)遍歷，加入label標(biāo)簽，這樣的做法是不對的

應(yīng)該現(xiàn)在頂層遍歷數(shù)據(jù)，加好label，然后再加判斷?optionData有值的時(shí)候再傳入這個(gè)組件，這樣就不會(huì)找不到選項(xiàng)數(shù)據(jù)了

?

5,?antd-mobile的級(jí)聯(lián)組件一點(diǎn)都不好用額，不滿足公司需求

需求是這樣的，點(diǎn)擊修改，彈出省的選擇，選擇省之后，再根據(jù)選擇的省級(jí)，加載市的數(shù)據(jù)，再根據(jù)市的選擇加載區(qū)的數(shù)據(jù)

而不是一股腦兒的把數(shù)據(jù)傳給你，這樣數(shù)據(jù)會(huì)很龐大，（即使不龐大，公司給的接口是這樣，我也沒有辦法，gucci~~）

既然如此，只能自己寫了，雖然寫的很爛，但是能用就好了

這里用到了?antd-mobile的Tag和Radio

做好的效果如圖

?

?效果還是可以的，哈哈哈，選完之后，點(diǎn)擊前面的tag，彈出相應(yīng)的可修改，后面的置灰不可點(diǎn)擊

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

?

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

作為移動(dòng)端，為了用戶體驗(yàn)，肯定會(huì)用到類似的一些彈出框，antd的組件雖然幫我們處理了一些，但是我發(fā)現(xiàn)ios上還是有穿透問題，即彈出內(nèi)容后，背后的頁面還是會(huì)隨著指尖滑動(dòng)而滑動(dòng)，這是怎么肥四？？

其實(shí)很簡單，先定義一個(gè)阻止默認(rèn)行為的函數(shù)：

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

任何在多選框或是抽屜彈出時(shí)：

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

當(dāng)關(guān)閉內(nèi)容時(shí)，再將設(shè)置恢復(fù)如初就ok了：

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

?

7.標(biāo)題置頂Bug，這個(gè)不是antd-mobile的bug，但是也記錄下

?收到的需求是這樣的，向上滑動(dòng)，滑到某一塊，某一塊的標(biāo)題置頂

這么簡單的小小功能用fixed做不就完了嘛，有什么難度?

?

?但是當(dāng)我完成效果的時(shí)候，發(fā)現(xiàn)有一個(gè)小bug，當(dāng)標(biāo)題置頂切換的時(shí)候，出現(xiàn)了閃動(dòng)，這是怎么回事？？

?原來設(shè)置了fixed的元素脫離了文檔流，使得獲取判斷的offsetTop的值不斷的發(fā)生變化，進(jìn)而會(huì)出現(xiàn)閃動(dòng)

解決方法，fixed既然脫離了文檔流，不就是少了一塊嘛，手動(dòng)加上便是

在每一模塊下面添加一個(gè)高度與標(biāo)題一樣的空的div，設(shè)置display為none，

當(dāng)滾動(dòng)到特定高度時(shí)，標(biāo)題置頂脫離文檔流的同時(shí)，設(shè)置該模塊下的空div的display：block，這就完事兒啦！！！

handleScroll=()=>{ const {scrollIds}=this.state const scrollY=window.scrollY const mainTopArr = []; let k=0;if(scrollIds){??//滑動(dòng)鎖定導(dǎo)航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" }}

?

轉(zhuǎn)載于:https://www.cnblogs.com/NatChen/p/10437151.html

總結(jié)

以上是生活随笔為你收集整理的antd-react-mobile(踩坑记录)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。