- 首先了解KeyboardAvoidingView屬性
behavior PropTypes.oneOf(['height', 'position', 'padding'])
contentContainerStyle View#style
如果設(shè)定behavior值為'position'，則會生成一個View作為內(nèi)容容器唯绍。此屬性用于指定此內(nèi)容容器的樣式尸红。
keyboardVerticalOffset PropTypes.number.isRequired
有時候應(yīng)用離屏幕頂部還有一些距離（比如狀態(tài)欄等等）蟆豫，利用此屬性來補(bǔ)償修正這段距離莉御。
2.KeyboardAvoidingView 可以避免鍵盤遮擋住輸入框
2.1 使用KeyboardAvoidingView
2.1.1效果圖如下
創(chuàng)建一個在底部的TextInput輸入框 效果如下
IMG_0780.JPG
IMG_0779.JPG
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}/>
);
}
}
