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. leaflet视频监控播放(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  2. 办公达人私藏的EXCEL辅助工具,一人抵十人,高效办公就靠它了!

    有很多小伙伴在日常工作中都离不开EXCEL的使用,但EXCEL实在是有太多困难.又复杂的操作,时间紧任务重这一天又废柴了,哎! 别担心,今天将为您分享个逆天强大的EXCEL辅助工具,帮大家快速搞定—— ...

  3. 庖丁解牛 Activity 启动流程

    前言 这是 Android 9.0 AOSP 系列 的第五篇了,先来回顾一下前面几篇的大致内容. Java 世界的盘古和女娲 -- Zygote 主要介绍了 Android 世界的第一个 Java 进 ...

  4. mysql之行转列与列转行

    mysql之行转列与列转行是数据查询的常见操作,以更好的来展示数据,下面就详细说说怎么实现. 行转列 行转列的话,就是将一条一条的行数据记录转换为一条列数据展示,一般来说是根据某一列来做汇总数据的操作 ...

  5. Jmeter常用的两大性能测试场景

    一.阶梯式场景 该场景主要应用在负载测试里面,通过设定一定的并发线程数,给定加压规则,遵循“缓起步,快结束”的原则,不断地增加并发用户来找到系统的性能瓶颈,进而有针对性的进行各方面的系统优化. 使用到 ...

  6. WebShell代码分析溯源(四)

    WebShell代码分析溯源(四) 一.一句话变形马样本 <?php @$_++;$__=("`"^"?").(":"^"} ...

  7. jquery 常用选择器基础语法学习

    siblings方法的常用应用场景:选中高亮 实现代码 <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. How to: Use the Entity Framework Data Model Located in an External Assembly 如何:使用位于外部程序集中的EF数据模型

    If you have a non-XAF application, and want to develop an XAF application that utilizes the same dat ...

  9. Entity Framework Core Code First 项目实践

    Entity Framework Core Code First 实践 任何一种技术的出现都是为了解决一系列特定的问题,只有了解了技术所要解决的关键问题,才能理解它的真正用途,之后,才能在实践中用好它 ...

  10. windows 下使用批处理执行 postgresql 命令行操作

    1.准备好命令文件 loraserver.sql create role loraserver_as with login password 'dbpassword'; create role lor ...