关于React Native 项目中，IOS键盘收起时留白问题

最近在项目中遇到一个bug，在iphone上输入内容后，点击键盘上的完成，收起IOS键盘时，再点击提交按钮时点击事件不触发。

我仔细排查了一遍代码，没有发现问题，说明是其他因素造成的。经过一番bug复现，
后来在iphone6 plus上定位了问题所在。 原来是IOS键盘弹出时，会把页面顶上去，使一部分空白空间遮挡住了提交按钮所导致的。并且点击IOS键盘上的完成或者屏幕使TextINput失去焦点时，被顶起的页面不会马上还原，直到你再次点击屏幕时，页面才会恢复，这时点击按钮才能触发事件。

问题找到了，那么接下来说说是怎么解决的，我是在TextInput 的 onBlur事件里，控制页面滑动，手动让被顶起的页面还原。

上代码：

	onBlur = () =>{
    	this.container.current.scrollIntoView({ behavior: "smooth" });
	}

这里使用scrollIntoView来使一个元素滑动到页面可视区域内

我看有的攻略上面使用document.documentElement.scrollTop=0，但是这个方法处理不了当前问题。

查看文档可知Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。，意思是设置Element.scrollTop=0的话，也只会影像元素的滚动像素，也就是让滚动条滑到最顶，这样做乍一看似乎可以解决问题，但是当页面内容不足一屏高从而没有滚动条时，这个方法就没有办法达到预期的效果了，不要忘记我们的目标是当TextInput失去焦点时，手动滑动一下页面。

完整代码：

import React,{PureComponent} from 'react';
import {TextInput,View} form 'react-native';

export default  class App extends PureComponent {

  	container = React.createRef();
  
	onBlur = () =>{
    	this.container.current.scrollIntoView({ behavior: "smooth" });
	}
	
	render(){
	  const {children} = this.porps;
	  return (
	  	<View ref={this.container}>
	      <TextInput onBlur={this.onBlur} />
	  	</View>
	  );
	}
}

这里this.container使用的ref，也可以获取DOM节点，像这样：

    const div = document.querySelector('div');
    form.scrollIntoView(true);

我个人觉得document.querySelector也挺好用的，不了解的同学可以看这里

完。