专栏首页非著名程序员基础篇章:关于 React Native 之 KeyboardAvoidingView 组件的讲解

基础篇章:关于 React Native 之 KeyboardAvoidingView 组件的讲解

友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)

看完了这个组件的名字 KeyboardAvoidingView ,你们心里肯定会想这是个什么东西,Keyboard 大家肯定知道是键盘,那是关于键盘的什么呢?Avoiding 是避免,回避的意思,这会大家估计知道什么了吧?键盘避免视图组件,我们在开发的时候,经常会遇到手机上弹出的键盘常常会挡住当前的视图,所以这个 KeyboardAvoidingView 组件的功能就是解决这个常见问题的,它可以自动根据手机上键盘的位置,调整自身的position或底部的padding,以避免被遮挡。

属性和方法

老样子,我们先来看看 KeyboardAvoidingView 组件的属性,只有了解了这些属性和方法,我们才能运用自如,属性如下:

  • behavior 位移焦点时就使用哪个属性来自适应,该参数的可选值为:height, position, padding
  • contentContainerStyle 如果设定behavior值为'position',则会生成一个View作为内容容器。此属性用于指定此内容容器的样式。
  • keyboardVerticalOffset 可能应用视图离屏幕顶部有一些距离,利用这个属性来补偿修正这段距离(键盘在竖直方向上的偏移量) 看完属性,我们再看看几个简单的方法:
  • relativeKeyboardHeight(keyboardFrame)
  • onKeyboardChange(event) 键盘改变时回调的方法
  • onLayout(event)

实例演示

照例,在实例代码之前,我们先看看效果图,这次我们看一个简单的对比图,在不使用 KeyboardAvoidingView 的情况下,看看是什么样子,使用了 KeyboardAvoidingView 组件的情况下,又是一种什么情况。

没有使用 KeyboardAvoidingView 前的效果图:

看看,是不是挡住了输入框的一半,很不人性化。那我们就再看看使用了 KeyboardAvoidingView 之后的效果如何?如下:

实例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  KeyboardAvoidingView,
  View
} from 'react-native';

export default class KeyboardAvoidingViewDemo extends Component {
  state = {
    behavior: 'padding',
  };
  render() {
    return (
      <View style={styles.container}>
         <KeyboardAvoidingView behavior="padding" style={styles.container}>
            <TextInput
              underlineColorAndroid={'#ffffff'}
              placeholder="这里是一个简单的输入框"
              style={styles.textInput} />
         </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
   container: {
    flex: 1,
    backgroundColor:'white',
    justifyContent: 'center',
    paddingHorizontal: 20,
    paddingTop: 20,
  },
  textInput: {
    borderRadius: 5,
    borderWidth: 1,
    height: 140,
    paddingHorizontal: 10,
  },
});

AppRegistry.registerComponent('KeyboardAvoidingViewDemo', () => KeyboardAvoidingViewDemo);

本文分享自微信公众号 - 非著名程序员(non-famous-coder),作者:loonggg

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-12-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android Material Design系列之Toolbar

    今天我们主要讲Toolbar的使用,我们都知道Toolbar是在Android 5.0以后推出来的,之前都是ActionBar这个控件。我相信虽然谷歌在3.0以...

    非著名程序员
  • 环境配置:React Native 开发环境配置 For Android

    React Native 是FaceBook开源的一个项目,FaceBook希望可以用写 Web App 的方式去写 Native App。它可以让我们用JS和...

    非著名程序员
  • 基础篇章:关于 React Native 之 DrawerLayoutAndroid 组件的讲解

    看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。...

    非著名程序员
  • Gartner发布未来三年内影响重大的十大信息科技趋势

    市场研究公司Gartner的IT专家预测出了2015年的十大信息科技趋势——如普适计算、物联网、3D打印、丰富环境系统、以及智能机器、云端/客户端架构等——这些...

    机器人网
  • 目标检测 - Faster R-CNN 训练过程源码理解

    得到的 imdb = pascal_voc(‘trainval’, ‘2007’) 记录的内容如下:

    AIHGF
  • python自制录屏小工具

    应用市场上录屏工具的原理很好理解,一是屏幕,二是声音。从这个角度出发,我们就可以对屏幕和声音同步来录制,最后在将音频和视频合并在一起,最后我们就得到了我们录屏的...

    AngelNH
  • 励志!月薪8000的工程师,如何一年买下800万北京商品房?

    下面是一个真实的故事 汽车工程师,月薪8000 一年就在北京买了一套价值800万的商品房! 这绝对是2016年最励志的故事 看完你会受益匪浅的! 现在的年轻...

    机器人网
  • Java进阶(四)线程间通信剖析

    Java多线程编程中经常会碰到这样一种场景——某个线程需要等待一个或多个线程操作结束(或达到某种状态)才开始执行。比如开发一个并发测试工具时,主线程需要等到所有...

    Jason Guo
  • 领先北清复科,上海交大获批新设AI本科专业(附“上交系”大牛盘点)

    继“人工智能从娃娃抓起”之后,国内高校在人工智能领域的科技创新和人才培养方面,又攻下一城。

    数据派THU
  • Java进阶(四)线程间通信剖析

    Jason Guo

扫码关注云+社区

领取腾讯云代金券