免费开源的iOS开发学习平台

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