先看幾張效果圖：
- 沒做任何處理：
View.gif
KeyboardAvoidingView.gif
- 用ScrollView處理：
ScrollView.gif
根據(jù)實際效果销钝，這里只介紹怎么用ScrollView來解決鍵盤遮擋問題鲤嫡。真的是幾行代碼的事：
import {
......
ScrollView, // 引入相關(guān)組件
Keyboard,
} from 'react-native';
// 監(jiān)聽鍵盤彈出與收回
componentDidMount() {
this.keyboardWillShowListener = Keyboard.addListener('keyboardWillShow',this.keyboardDidShow);
this.keyboardWillHideListener = Keyboard.addListener('keyboardWillHide',this.keyboardDidHide);
}
//注銷監(jiān)聽
componentWillUnmount () {
this.keyboardWillShowListener && this.keyboardWillShowListener.remove();
this.keyboardWillHideListener && this.keyboardWillHideListener.remove();
}
//鍵盤彈起后執(zhí)行
keyboardDidShow = () => {
this._scrollView.scrollTo({x:0, y:100, animated:true});
}
//鍵盤收起后執(zhí)行
keyboardDidHide = () => {
this._scrollView.scrollTo({x:0, y:0, animated:true});
}
用ScrollView將TextInput等組件包一層：
<ScrollView ref={component => this._scrollView=component} scrollEnabled={false}
keyboardShouldPersistTaps={true}>
...... // 其他組件代碼
</ScrollView>
這樣基本就將鍵盤遮擋問題很好的解決了，位移100可以根據(jù)實際情況做一些修改巍杈，你也可以直接設(shè)成鍵盤的高度闺金。
這里引入另一個知識點：對組件的引用（refs）
哈哈拒课，貌似代碼不止幾行，而是十多行??羡儿。
