想要完美的输入体验，键盘是千万不能遮挡的，而且在最后一项输入的时候，底部的 【提交/登录】按钮需要弹上来显示，那么，让我们来解决这个问题吧。 

首先，安装组件 

npm i react-native-keyboard-aware-scroll-view --save

 然后，用如下包裹你的 input 输入组件

<KeyboardAwareScrollView
    extraHeight={120}
    enableOnAndroid={true}
    enableResetScrollToCoords={true}>
    <View>...</View>
</KeyboardAwareScrollView>

这里有必要说一下，必须开启 enableOnAndroid 后 extraHeight 才生效。

extraHeight 也就是键盘弹出后，距离包裹组件的 margin height。最终效果如下：

 

Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony二手物品置换App实战 - 聊天对话实现

avatar 开源鸿蒙跨平台开发者社区

Flutter框架跨平台鸿蒙开发——图书馆座位预约APP开发流程

本文介绍了使用Flutter框架开发跨平台鸿蒙图书馆座位预约APP的全流程。主要内容包括： 项目概述：一款提供座位查询、预约和管理功能的移动应用，核心功能包括座位列表展示、筛选、预约、记录查看和取消预约。 开发流程：从需求分析到上线发布的完整开发周期，重点采用Flutter框架实现跨平台兼容性。 核心技术实现： 项目结构设计 数据模型构建（座位和预约模型） 核心业务逻辑（座位初始化、预约服务等）

avatar 开源鸿蒙跨平台开发者社区

知识点：交换机、MAC 地址、路由器、IP ；网络类型、IP 分类、端口号、ARP 协议、ICMP 协议、域名、DNS、CDN

本文用快递物流类比网络通信概念：MAC地址是设备的物理身份证（如房间号），用于本地精准投递；IP地址是逻辑住址（如小区地址），负责全球寻址；交换机像大楼快递员，根据MAC分发数据；路由器则是城市中转站，按IP选择路径。端口号区分应用程序（门牌号），ARP协议查询IP对应MAC，ICMP检测网络连通性。DNS将域名翻译为IP，CDN就近缓存内容加速访问。通过访问网站的完整流程示例，串联展示了从DNS

avatar 开源鸿蒙跨平台开发者社区