Android上已经自动对键盘遮挡输入框做了处理,所以我们只需要关注ios。

1.首先引入 KeyboardAvoidingView

import { KeyboardAvoidingView } from 'react-native';

2.然后在页面的最外层加上 KeyboardAvoidingView

render(){
return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
{/*具体页面内容*/}
</KeyboardAvoidingView>
}

如果适配ios和Android,可以将页面提取出来

    getPageView = () => {
//return 具体页面内容
}
getPlatformView = () => {
if (Platform.OS === 'ios') {
return <KeyboardAvoidingView behavior={'padding'} style={{flex: 1}}>
{this.getPageView()}
</KeyboardAvoidingView>
} else {
return this.getPageView();
}
}; render() {
return this.getPlatformView();
}

react-native 键盘遮挡输入框的更多相关文章

  1. react native 键盘遮挡按钮点击事件

    在做项目的时候,我遇到一个很奇怪的问题,我先描述一下问题,在InputText输入内完成以后,点击按钮进行下一步的操作的时候,第一次点击的时候,按钮没有响应,第二次点击的时候才会响应.这样对用户体验有 ...

  2. React-native键盘遮挡输入框问题的解决

    2016年10月25日更新: 现在有一个更准确一点的做法是用一个View包裹住TextInput,然后通过该View的onLayout方法获取该输入框的y轴位置,再减去一个适当的高度去处理scroll ...

  3. iOS键盘遮挡输入框,输入区域自动上移

    在iOS开发过程当中,遇到关于键盘遮挡输入框的问题,经过网络参考与实践,总结如下: 登录窗口,上下放置两个UITextField,一个用户名,一个密码,放置的在屏幕下方1/3处,当点击用户名时,自动弹 ...

  4. iOS- UITextView与键盘回收与键盘遮挡输入框

    一.UITextView 可以实现多行输入的文本框,基本属性与UITextField相似,可以输入多行,可以滚动.UITextView还有个代理方式- (BOOL)textView:(UITextVi ...

  5. iOS 键盘遮挡输入框万能解决方案(多个输入框)

    效果图如下: 思路分析: 代码: 知识点: 问题: 效果图如下: 思路分析: 当我们有很多输入框时,有时候键盘弹出来会遮挡着输入框.我们需要获取输入框和键盘相对于最外层视图的位置来判断是否遮挡,如果遮 ...

  6. [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法

    React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...

  7. iOS Android中 h5键盘遮挡输入框的问题和解决方案

    问题发现:在 Android 部分机型 和 iOS部分系统下 键盘会出现遮挡输入框的情况(壳内).问题解决: Android 经过测试,Android 的6.0版本以上均会出现改问题,归根到底是之前的 ...

  8. iOS 开发之路(登陆页键盘遮挡输入框问题)一

    在学习开发登陆页的时候,遇到的问题分享如下: 首先是swift 3.0 中,NotificationCenter 设置 selector 如下: @IBOutlet weak var bottomCo ...

  9. android webview 输入法键盘遮挡输入框的问题

    新建一个工具类: /** * 解决webView键盘遮挡问题的类 * Created by zqy on 2016/11/14. */ public class KeyBoardListener { ...

随机推荐

  1. android shape实现阴影或模糊边效果

    1.实现阴影或模糊边效果方式: 2.通过shape来实现,具体是通过layer-list 多层叠放的方式实现的 <?xml version="1.0" encoding=&q ...

  2. python--推倒式(列表、字典、集合)

    python的各种推导式(列表推导式.字典推导式.集合推导式) 推导式comprehensions(又称解析式),是Python的一种独有特性.推导式是可以从一个数据序列构建另一个新的数据序列的结构体 ...

  3. 分布式图数据库 Nebula RC2 发布:增强了 CSV Importer 功能

    Nebula Graph 是开源的分布式图数据库,可应用于知识图谱.社交推荐.风控.IoT 等场景. 本次 RC2 主要新增 GO FROM ... REVERSELY 和 GROUP BY 等语句, ...

  4. C# 从字符串中提取指定字符类型的内容

    从一段字符串中,提取中文.英文.数字 中文字符30Margin中文字符40HorizontalAlignment 正则表达式: /// <summary> /// 英文字母与数字 /// ...

  5. 更换国内pip

    pip国内的一些镜像 原始地址:https://pypi.python.org/simple 国内地址: 阿里云 http://mirrors.aliyun.com/pypi/simple/ 中国科技 ...

  6. Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构

    Java生鲜电商平台-深入理解微服务SpringCloud各个组件的关联与架构 概述 毫无疑问,Spring Cloud是目前微服务架构领域的翘楚,无数的书籍博客都在讲解这个技术.不过大多数讲解还停留 ...

  7. SpringCloud之Zuul:服务网关

    Zuul在Web项目中的使用见上文<SpringBoot中使用Zuul>,下面例子为Zuul在Spring Cloud的使用. 开发工具:IntelliJ IDEA 2019.2.3 一. ...

  8. Oracle 11g Dataguard参数详解

    https://www.jb51.net/article/52269.htm注:本文译自<Oracle Data Guard 11g Handbook> Page 78 – Page 88 ...

  9. MySQL语句使用。

    目录 MySQL的DDL.DML.DQL语句和单表增.删.改.查 实验准备: 实验开始: DDL语句 DML语句 DQL语句 单表操作的分组统计 MySQL的DDL.DML.DQL语句和单表增.删.改 ...

  10. Qt 信号和槽异常: QObject::connect: No Such slot baseClassName::subClassfunction() in ......

    2019-08-14起笔 小熊的情况描述: 父类A继承自QWidget,所以父类A自动添加了Q_OBJECT.  子类B继承自父类A,子类B没有添加Q_OBJECT.在子类B中给动态创建的控件添加事件 ...