先看几张效果图：
- 没做任何处理：
View.gif
KeyboardAvoidingView.gif
- 用ScrollView处理：
ScrollView.gif
根据实际效果，这里只介绍怎么用ScrollView来解决键盘遮挡问题。真的是几行代码的事：
import {
......
ScrollView, // 引入相关组件
Keyboard,
} from 'react-native';
// 监听键盘弹出与收回
componentDidMount() {
this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow',this.keyboardDidShow);
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide',this.keyboardDidHide);
}
//注销监听
componentWillUnmount () {
this.keyboardWillShowListener && this.keyboardWillShowListener.remove();
this.keyboardWillHideListener && this.keyboardWillHideListener.remove();
}
//键盘弹起后执行
keyboardDidShow = () => {
this._scrollView.scrollTo({x:0, y:100, animated:true});
}
//键盘收起后执行
keyboardDidHide = () => {
this._scrollView.scrollTo({x:0, y:0, animated:true});
}
用ScrollView将TextInput等组件包一层：
<ScrollView ref={component => this._scrollView=component} scrollEnabled={false}
keyboardShouldPersistTaps={true}>
...... // 其他组件代码
</ScrollView>
这样基本就将键盘遮挡问题很好的解决了，位移100可以根据实际情况做一些修改，你也可以直接设成键盘的高度。
这里引入另一个知识点：对组件的引用（refs）
哈哈，貌似代码不止几行，而是十多行😝。
