React Native 组件之 KeyboardAvoidingView 简单使用

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输入框 效果如下

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}/>

);

}

}

```