React Native基础:13-KeyboardAvoidingView组件
KeyboardAvoidingView组件简介
目前市面上的智能手机基本上,用户都是使用虚拟键盘(软键盘)来输入内容,使用实体键盘的智能手机几乎已经销声匿迹了。用户输入习惯的变化,随之而来的一个问题就是手机上弹出的键盘常常会挡住当前的视图,导致用户不知道应该输入的是什么内容。KeyboardAvoidingView组件就是用来解决这个尴尬的问题的,它能在弹出键盘的时候将视图整体上移,从而避免界面内容被键盘盖住。
一般来说,KeyboardAvoidingView组件经常会用在有输入框的界面,比较常见的有登录界面、用户资料修改页面、IM软件的聊天界面等。
KeyboardAvoidingView组件通过behavior属性来控制键盘弹出之后的组件行为。behavior属性有三个值:height、padding和postion。通常情况下,我们只考虑padding和position即可,height会改变视图的高度,导致键盘回收后不能回到原来的位置。
- padding:通过设置KeyboardAvoidingView的paddingBottom样式的值,来改变内容的位置。
- position:新建一个视图作为子组件的容器,并且通过设置视图bottom样式的值,来改变内容的位置。
示例代码
我们通过一个示例代码来学习使用KeyboardAvoidingView组件实现界面的整体向上移动的方法。在该案例中,我们在KeyboardAvoidingView组件中添加两个子组件,一个是SegmentedControlIOS组件,用于切换behavior属性的值,另外一个TextInput组件,当用户点击TextInput组件开始输入时,KeyboardAvoidingView组件会根据SegmentedControlIOS组件的当前值选择界面上移的方式。
- 在终端中执行如下命令,创建KeyboardAvoidingViewDemo工程;
react-native init KeyboardAvoidingViewDemo
- 使用Atom打开工程的index.ios.js文件,编写组件所使用的样式
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 20,
paddingTop: 20,
},
textInput: {
borderRadius: 5,
borderWidth: 1,
height: 44,
paddingHorizontal: 10,
top: 10,
},
});
- 构建界面。在KeyboardAvoidingView组件中添加一个SegmentedControlIOS组件以及一个TextInput组件。
export default class KeyboardAvoidingViewDemo extends Component {
state = {
behavior: 'padding',
};
render() {
return (
<View style={styles.container}>
<KeyboardAvoidingView behavior={this.state.behavior} style={styles.container}>
<SegmentedControlIOS
onValueChange={this.onSegmentChange}
selectedIndex={this.selectedIndex()}
style={styles.segment}
values={['Padding', 'Position']} />
<TextInput
placeholder="<TextInput />"
style={styles.textInput} />
</KeyboardAvoidingView>
</View>
);
}
}
- 在KeyboardAvoidingViewDemo组件中,通过设置SegmentedControlIOS组件selectedIndex属性来初始化界面。
selectedIndex = () => {
switch (this.state.behavior) {
case 'padding':
return 0;
case 'position':
return 1;
default:
return 0;
}
}
- 在KeyboardAvoidingViewDemo组件中,通过处理SegmentedControlIOS的选择事件来修改KeyboardAvoidingView的behavior属性。
onSegmentChange = (segment: String) => {
this.setState({behavior: segment.toLowerCase()});
};
- 使用import加载项目所使用的模块,并且注册组件KeyboardAvoidingViewDemo成为整个应用的根容器。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
KeyboardAvoidingView,
SegmentedControlIOS,
TextInput,
} from 'react-native';
AppRegistry.registerComponent('KeyboardAvoidingViewDemo', () => KeyboardAvoidingViewDemo);
- 在终端中执行下面的命令运行程序。到现在为止,我们就可以通过切换SegmentedControlIOS组件的不同选项来体验这两种行为的区别了。
react-native run-ios