1. 首先了解KeyboardAvoidingView屬性
behavior PropTypes.oneOf(['height', 'position', 'padding'])
contentContainerStyle View#style
如果設(shè)定behavior值為'position'裹芝，則會(huì)生成一個(gè)View作為內(nèi)容容器怖现。此屬性用于指定此內(nèi)容容器的樣式。
keyboardVerticalOffset PropTypes.number.isRequired
有時(shí)候應(yīng)用離屏幕頂部還有一些距離（比如狀態(tài)欄等等），利用此屬性來(lái)補(bǔ)償修正這段距離惕味。
2.KeyboardAvoidingView 可以避免鍵盤遮擋住輸入框
2.1 使用KeyboardAvoidingView
2.1.1效果圖如下
創(chuàng)建一個(gè)在底部的TextInput輸入框 效果如下
2.1.2代碼如下
```
importReact,{Component,PureComponent}from'react';
import{
StyleSheet,
Text,
View,
Dimensions,
SeparatorComponent,
KeyboardAvoidingView,
TextInput,
}from'react-native';
export default classKeyboardViewextendsComponent{
// 構(gòu)造
constructor(props) {
super(props);
// 初始狀態(tài)
this.state= {
text:'',
};
this.changeValue=this.changeValue.bind(this);
}
changeValue(text){
this.setState({
text:text
});
}
render(){
return(
{this.state.text}
behavior="padding"
keyboardVerticalOffset={-20}
>
style={{borderRadius:5,borderWidth:1.0,borderColor:'red',height:30}}
onChangeText={this.changeValue}/>
);
}
}
```
