最近由于项目中出现的一个bug，所以阅读了一下antd的picker的源码。
antd的picker使用了开源库rmc-picker，antd层只是做了样式和默认值的包装，具体源码可见AbstractPicker。
rmc-picker在移动端工作时，由picker(对应源码文件Picker.native.js)和popup(对应源码文件Popup.native.js)两部分组成，其中picker最终调用的是react-native官方的picker控件，iOS端最终对应控件RCTPicker；popup最终调用的react-native官方控件Modal。
rmc-picker还为这两个控件分别创建了管理类MutiPickerMixin和PopupMixin。当我们唤起一个picker的时候，首先会调用PopupMixin里面的方法setVisibleState，而由于修改了state，MultiPicker.native会被重新初始化，picker的当前选中值会从MultiPicker.native的props里面更新，最终在PickerIOS的getInitialState方法中设置到state中，通过render驱动原生的转盘控件转到对应的行（setSelectedIndex方法）。
当我们转动滚盘，RCTPicker首先会触发代理函数pickerView:didSelectRow:，里面调用了PickerIOS的_onChange方法。注意这个_onChange方法的流程，this.props.onValueChange最终会修改PopupMixin里面的pickerValue这个state，然后_onChange会继续执行到this._picker.setNativeProps方法，此时的this.state.selectedIndex还是旧的值，所以会先将RCTPicker的selectedIndex置为旧值，但由于上一步修改PopupMixin的pickerValue生效，PickerIOS会重新render，此时的selectedIndex才会更新成新值。所以，其实我们滚动转盘的时候，比如从第二行滚动到第四行，其实滚盘停在第四行的一瞬间，会先瞬间滚回到第二行，然后再瞬间滚动到第四行。具体的函数调用流程如下图：
网友评论