NatChen

Once you have chosen the road of life, you have to be brave enough to go to the end and never look back.

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>

 按需加载#

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

 

posted @ 2019-02-26 14:32  NatChen  阅读(9687)  评论(1编辑  收藏  举报