基础篇章:关于 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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Hongten

java开发_模仿百度文库_FlexPaper

下载地址:http://code.google.com/p/flexpaper/downloads/list

901
来自专栏闵开慧

struts2 标签全面解释

A: <s:a xhref=""></s:a>-----超链接,类似于html里的<a></a> <s:action name=""></s:action>--...

3479
来自专栏Django Scrapy

Django安装及简单使用1.5

Django安装及简单使用1.5 代码都在github: URL:https://github.com/njxshr/codes/tree/master/t...

3327
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

2405
来自专栏Web行业观察

你真的了解回流和重绘吗?(面试必问)

回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一...

1554
来自专栏对角另一面

读Zepto源码之Fx模块

fx 模块为利用 CSS3 的过渡和动画的属性为 Zepto 提供了动画的功能,在 fx 模块中,只做了事件和样式浏览器前缀的补全,没有做太多的兼容。对于不支持...

3250
来自专栏林德熙的博客

win10 uwp win2d CanvasVirtualControl CanvasAnimatedControlCanvasVirtualControl其他博客

本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件。

1591
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何在手机上实现散落点图表功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

972
来自专栏谦谦君子修罗刀

React-native-scrollable-tab-view详解

前言:他方山上有佳石,可以用来琢玉器。只有解决了一个红屏,才有机会遇见另一个红屏。只有解决了一个困难,才有机会遇到其他的困难。O(∩_∩)O~生命不息,奋斗不止...

99810
来自专栏Taylor技术日志

Laravel-Excel导出功能文档

可以在闭包中修改一些属性,很多属性可在配置文件中设置默认值 config/excel.php

1.3K50

扫码关注云+社区