记录react-mobile-picker使用过程中遇到的bug（ios，部分安卓触发touchcancel时发生）--系统源码也有风险

问题描述一：

在ios，部分安卓，在手指拖动选择的时候，程序切换（其他情况也行，主要能触发TouchCancel），导致触发TouchCancel，源码里面在重置滚动位置的时候，直接取用一个对象，并且我在抛出undefined的同时也设置了value和options，导致计算的时候出现NaN；

解决：需要解构出startScrollerTranslate，在picker抛出undefined时不要设置value值

场景：省市选择器，选择省份的时候同步市的选项（需要不断赋值，之前写的代码也有问题）

分析源码：

import React, { useState, useEffect } from "react";
// import RcPicker from "react-mobile-picker";
import RcPicker from "../RcMobilePicker";
import styles from "./index.module.scss";
import "./reset.scss";
import scrollLock from "../../utils/scroll-lock";

interface IProps {
  title?: string;
  tipMsg?: string;
  cancelTxt?: string;
  confirmTxt?: string;
  onCancel: () => void;
  onConfirm: (result: object) => void;
  optionGroups: object;
  valueGroups: object;
  onChange?: (name, value) => void;
}

export default function Picker(props: IProps) {
  useEffect(() => {
    scrollLock.enable();

    return () => {
      scrollLock.disable();
    };
  }, []);

  const handleChange = (name, value) => {
    console.log(name, value, "handleChangehandleChange");
　　　原先并没有判断value为空的情况，直接触发change，导致value设置部分值为undefined，也为后面的报错留下伏笔（堆栈溢出）
    if (!!value) {
      props.onChange && props.onChange(name, value);
    }
  };

  return (
    <div className={styles.pickerModalWrapper}>
      <div
        className={styles.pickerModalMask}
        onClick={() => props.onCancel()}
      ></div>
      <div className={`${styles.pickerModal} ${styles.pickerModalToggle}`}>
        <header>
          <div className={styles.cancelBtn} onClick={() => props.onCancel()}>
            {props.cancelTxt || "取消"}
          </div>
          <div className={styles.title}>{props.title || "请选择"}</div>
          <div className={styles.confirmBtn} onClick={props.onConfirm}>
            {props.confirmTxt || "确定"}
          </div>
        </header>
        {props?.tipMsg ? (
          <div className={styles.tipsContainer}>
            <p className={styles.txt}>{props?.tipMsg}</p>
          </div>
        ) : null}
        <RcPicker
          optionGroups={props.optionGroups}
          valueGroups={props.valueGroups}
          onChange={handleChange}
        />
      </div>
    </div>
  );
}

　　

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import './style.scss';

class PickerColumn extends Component {
  static propTypes = {
    options: PropTypes.array.isRequired,
    name: PropTypes.string.isRequired,
    value: PropTypes.any.isRequired,
    itemHeight: PropTypes.number.isRequired,
    columnHeight: PropTypes.number.isRequired,
    onChange: PropTypes.func.isRequired
  };

  constructor(props) {
    super(props);
    this.state = {
      isMoving: false,
      startTouchY: 0,
      startScrollerTranslate: 0,
      ...this.computeTranslate(props)
    };
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.isMoving) {
      return;
    }
    this.setState(this.computeTranslate(nextProps));
  }

  computeTranslate = (props) => {
    const {options, value, itemHeight, columnHeight} = props;
    let selectedIndex = options.indexOf(value);
    if (selectedIndex < 0) {
      // throw new ReferenceError();
      console.warn('Warning: "' + this.props.name+ '" doesn\'t contain an option of "' + value + '".');
      this.onValueSelected(options[0]);
      selectedIndex = 0;
    }
    return {
      scrollerTranslate: columnHeight / 2 - itemHeight / 2 - selectedIndex * itemHeight,
      minTranslate: columnHeight / 2 - itemHeight * options.length + itemHeight / 2,
      maxTranslate: columnHeight / 2 - itemHeight / 2
    };
  };

  onValueSelected = (newValue) => {
    this.props.onChange(this.props.name, newValue);
  };

  handleTouchStart = (event) => {
    const startTouchY = event.targetTouches[0].pageY;
    this.setState(({scrollerTranslate}) => ({
      startTouchY,
      startScrollerTranslate: scrollerTranslate
    }));
  };

  handleTouchMove = (event) => {
    event.preventDefault();
    const touchY = event.targetTouches[0].pageY;
    this.setState(({isMoving, startTouchY, startScrollerTranslate, minTranslate, maxTranslate}) => {
      if (!isMoving) {
        return {
          isMoving: true
        }
      }

      let nextScrollerTranslate = startScrollerTranslate + touchY - startTouchY;
      if (nextScrollerTranslate < minTranslate) {
        nextScrollerTranslate = minTranslate - Math.pow(minTranslate - nextScrollerTranslate, 0.8);
      } else if (nextScrollerTranslate > maxTranslate) {
        nextScrollerTranslate = maxTranslate + Math.pow(nextScrollerTranslate - maxTranslate, 0.8);
      }
      return {
        scrollerTranslate: nextScrollerTranslate
      };
    });
  };

  handleTouchEnd = (event) => {
    if (!this.state.isMoving) {
      return;
    }
    this.setState({
      isMoving: false,
      startTouchY: 0,
      startScrollerTranslate: 0
    });
    setTimeout(() => {
      const {options, itemHeight} = this.props;
      const {scrollerTranslate, minTranslate, maxTranslate} = this.state;
      let activeIndex;
      if (scrollerTranslate > maxTranslate) {
        activeIndex = 0;
      } else if (scrollerTranslate < minTranslate) {
        activeIndex = options.length - 1;
      } else {
        activeIndex = - Math.floor((scrollerTranslate - maxTranslate) / itemHeight);
      }
      this.onValueSelected(options[activeIndex]);
    }, 0);
  };

  handleTouchCancel = (event) => {
    if (!this.state.isMoving) {
      return;
    }
//原来写法，通过分析reactdom可以看到，这个值没有解构，但是在start的时候又有解构，暂不知道是否有具体用意？源码地址：https://github.com/adcentury/react-mobile-picker/blob/master/src/index.js
//this.setState(({startScrollerTranslate}) => ({

    this.setState(({startScrollerTranslate}) => ({
      isMoving: false,
      startTouchY: 0,
      startScrollerTranslate: 0,
      scrollerTranslate: startScrollerTranslate
    }));
  };

  handleItemClick = (option) => {
    if (option !== this.props.value) {
      this.onValueSelected(option);
    }
  };

  renderItems() {
    const {options, itemHeight, value} = this.props;
    return options.map((option, index) => {
      const style = {
        height: itemHeight + 'px',
        lineHeight: itemHeight + 'px'
      };
      const className = `picker-item${option === value ? ' picker-item-selected' : ''}`;
      return (
        <div
          key={index}
          className={className}
          style={style}
          onClick={() => this.handleItemClick(option)}>{option}</div>
      );
    });
  }

  render() {
    const translateString = `translate3d(0, ${this.state.scrollerTranslate}px, 0)`;
    const style = {
      MsTransform: translateString,
      MozTransform: translateString,
      OTransform: translateString,
      WebkitTransform: translateString,
      transform: translateString
    };
    if (this.state.isMoving) {
      style.transitionDuration = '0ms';
    }
    return(
      <div className="picker-column">
        <div
          className="picker-scroller"
          style={style}
          onTouchStart={this.handleTouchStart}
          onTouchMove={this.handleTouchMove}
          onTouchEnd={this.handleTouchEnd}
          onTouchCancel={this.handleTouchCancel}>
          {this.renderItems()}
        </div>
      </div>
    )
  }
}

export default class Picker extends Component {
  static propTyps = {
    optionGroups: PropTypes.object.isRequired,
    valueGroups: PropTypes.object.isRequired,
    onChange: PropTypes.func.isRequired,
    itemHeight: PropTypes.number,
    height: PropTypes.number
  };

  static defaultProps = {
    itemHeight: 36,
    height: 216
  };

  renderInner() {
    const {optionGroups, valueGroups, itemHeight, height, onChange} = this.props;
    const highlightStyle = {
      height: itemHeight,
      marginTop: -(itemHeight / 2)
    };
    const columnNodes = [];
    for (let name in optionGroups) {
      columnNodes.push(
        <PickerColumn
          key={name}
          name={name}
          options={optionGroups[name]}
          value={valueGroups[name]}
          itemHeight={itemHeight}
          columnHeight={height}
          onChange={onChange} />
      );
    }
    return (
      <div className="picker-inner">
        {columnNodes}
        <div className="picker-highlight" style={highlightStyle}></div>
      </div>
    );
  }

  render() {
    const style = {
      height: this.props.height
    };

    return (
      <div className="picker-container" style={style}>
        {this.renderInner()}
      </div>
    );
  }
}

　　原因：在滚动到临界状态（也就是省份的中间），官方给的demo用例也是可以试出来，就是滚动到中间，切换程序，再回来的时候会发现比没有滚动在其中一个省市上，而是停留在中间，再重新滚动是，会先再触发抛出一个undefined，随后恢复正常），切换程序，触发cancel，抛出undefined，外部程序接收undefined的时候，set入value，重新遍历出options，picker组件接收到错误值；回到picker组件中重新滚动（handleTouchStart），结构出来的scrollerTranslate还是undefined/NaN,往下计算后又抛出undefined，导致死循环。

　　这里死循环是组件代码和自身代码都有问题导致的。

解决：抛出undefined不处理，picker在touchcancel的时候结构出startScrollerTranslate，这种原先的值，恢复到上次滚动的距离。

 

问题描述二（样式问题）：没有做好兼容性，导致文字被遮挡,不影响功能，但丑

机型：苹果14 IOS16.4  升级了iosbeta版本好像都有问题safari

// 覆盖picker的渐变色
:global {
  .picker-container .picker-inner {
    -webkit-mask-box-image: none;
  }
}

　　

 

 

 

 

 

 

https://github.com/adcentury/react-mobile-picker/issues/56