- 首先了解KeyboardAvoidingView属性
behavior PropTypes.oneOf(['height', 'position', 'padding'])
contentContainerStyle View#style
如果设定behavior值为'position'，则会生成一个View作为内容容器。此属性用于指定此内容容器的样式。
keyboardVerticalOffset PropTypes.number.isRequired
有时候应用离屏幕顶部还有一些距离（比如状态栏等等），利用此属性来补偿修正这段距离。
2.KeyboardAvoidingView 可以避免键盘遮挡住输入框
2.1 使用KeyboardAvoidingView
2.1.1效果图如下
创建一个在底部的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{
// 构造
constructor(props) {
super(props);
// 初始状态
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}/>
);
}
}
