多个TextInput情形下，键盘遮挡问题解决方案

Demo：MultiTextInputScrollView
最近一段时间做了一个基于React Native的APP PasswordAssistant ，其中需要用到表单，我选用了一个第三方组件 tcomb-form-native 。集成后，发现这个表单并没有处理键盘遮挡问题，于是自己解决+搜索网友的方案，最终，借鉴 基于多个TextInput的键盘遮挡处理方案优化 的实现方案，加上自己解决的几个bug，实现了一个相对完美的解决方案。

解决键盘遮挡问题，是每一个开发者都会面临的问题，在我们iOS开发中，通用的解决方案是监听键盘的高度，然后改变scrollView的偏移。在我所收集到的解决方案里，大部分也是基于这个思路来解决问题。由于多数方案仅考虑了单个TextInput的情况，因此，在多个TextInput情况下难免水土不服。尽管React Native官方提供了 keyboardavoidingview 用于解决键盘遮挡问题，但在实际应用上也是有心无力。言归正传，放上我的Demo：MultiTextInputScrollView 。
接下来，我将结合demo中的代码，情景再现下所遇到的问题及解决方案。
在demo中，一个相对重要的点是scrollView的一个属性：onScrollEndDrag (function) ，这个属性并未在官方文档中提到，在源码中才会发现这个属性。参考网友的总结：总结一下今年的react native 填坑之旅 。之所以说这个属性重要，是因为要解决键盘遮挡就要适当的改变scrollView的偏移，获取当前的偏移位置再加上TextInput需要调整的偏移，才是最终调用scrollView的scrollTo方法需要传的值。
刚开始根据 基于多个TextInput的键盘遮挡处理方案优化 的方法，我也是用下面的代码获取scrollView的偏移：

onScrollEndDrag={(e) => {
          this.moveH = e.nativeEvent.contentOffset.y;
        }}

同样也按照文中的方法做了异常数据处理，但存在一些明显的bug，例如，TextInput经常偏移过多或过少。尽管我在其基础上增加了异常情形的处理，但还是存在微小的bug。今天抽出时间深入分析了一下bug的原因，发现是获取scrollView的偏移的方法不对。正确的取值代码如下：

onScrollEndDrag={(e) => {
          this.moveH = e.nativeEvent.targetContentOffset.y;
          this.moveHeight = 0;
          console.log('nativeEvent==' + JSON.stringify(e.nativeEvent));
        }}

在scrollView的y偏移为0的情况下，往下拖拽scrollView，待松手后，控制台打印的log如下：

nativeEvent=={
 "layoutMeasurement":{"width":375,"height":667},
 "targetContentOffset":{"x":0,"y":0},
 "contentOffset":{"x":0,"y":-29},
 "contentInset":{"right":0,"top":0,"left":0,"bottom":0},
 "velocity":{"x":0,"y":-2.8134224302815314},
 "zoomScale":1,
 "contentSize":{"width":375,"height":720}
}

可以看出，contentOffset.y 为负值 而 targetContentOffset.y 为零。contentOffset.y 之所以为负值是因为scrollView的弹簧效果决定了scrollView可以拖拽超出它的contentSize，上面说的异常情形处理就是为了填这个坑。而我们需要的是scrollView实际偏移的值，而非包含超出contentSize的值。因此将contentOffset.y 换成 targetContentOffset.y 就完美了，也不存在异常数据情形了。
是否真的完美了呢？可以说是的，如果你不在乎细小瑕疵的话。这里说的细小瑕疵指的是，存在一种情形，即：点击非TextInput以外的空白区域，退下键盘，会发现scrollView并没有恢复到原来的位置，具体复现方法是：选中一个TextInput A，由于键盘遮挡，TextInput向上滚动一段距离，此时再点击A的上面一个TextInput B。由于B此时距屏幕底部的距离大于（键盘的高度+行高），所以，代码中的this
.needMove为false,导致，键盘退下时，scrollView并没有恢复到原来的位置。 解决方法有两种：

1. 将scrollView的keyboardShouldPersistTaps属性由'handled'改成'always',这样，点击非TextInput以外的空白区域，键盘就不会退下了。
2. 记录键盘弹起后TextInput调整的偏移量this.moveHeight，在键盘消失时判断如果this.moveHeight大于零，就让scrollView恢复到原来的位置。另外，在onScrollEndDrag方法里记得重置this.moveHeight = 0 。

到这里，终于算是真正的完美了。