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"

}

}