React Native 组件之 KeyboardAvoidin

1. 首先了解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}/>
);
}
}