键盘遮挡输入框 React Native 修复模板

键盘一弹出来就挡住输入框，是 React Native 表单里最常见、也最容易被忽略的体验坑。用户看不见自己在输入什么，提交按钮还被压在键盘下面，登录、注册、下单这些关键流程一下就卡住了。好在这个问题有成熟的修法，配一个本来就处理好键盘的设计起步，会顺很多。

为什么这个小坑会劝退用户

表单是流失重灾区：普通 App 的次日留存只有约 25%，而注册或登录时键盘挡住输入框、找不到提交按钮，往往就是压垮用户的最后一根稻草。一个看不见自己输入内容的表单，体感上跟坏掉没区别。把键盘避让做对，是保住转化的基本功，不是锦上添花。React Native 官方的 KeyboardAvoidingView 就是为这个场景准备的。更麻烦的是，这个坑在大屏手机上往往看不出来，换到小屏、或者用户开了更大字号的设备上才暴露，等到收到差评才发现就太晚了。

几种遮挡场景和修法

不同布局的遮挡原因不一样，对应的修法也不同。

场景	修法
登录页	KeyboardAvoidingView 包住，整体上移
长表单	放进可滚动容器，聚焦自动滚到输入框
底部输入	输入条跟随键盘顶到上方
弹窗内输入	弹窗整体避让，别让键盘盖住

实战示例

修一个被键盘挡住的注册页：在 VP0 挑一个处理过表单的原生设计，复制链接喂给 Cursor，让它用 KeyboardAvoidingView 加 ScrollView 重建，behavior 在 iOS 用 padding、安卓单独验证，聚焦时把当前输入框滚到键盘上方。按苹果的人机界面指南 把输入和按钮的间距留够。需要在弹窗里输入时，参考毛玻璃弹窗 的避让处理一起做。

常见误区

最常见的错误是只在一台机器上调好就以为完事，换个屏幕尺寸或换到安卓，键盘行为又变了。另一个坑是给整页粗暴加一个固定 padding，键盘收起后界面又空出一大块。正确做法是用避让容器加自动滚动，跟着键盘动。调试时一定要在小屏真机上试一遍，最容易被键盘遮挡的恰恰就是那块屏幕。需要现成的输入组件时，React Native shadcn 平替 里的表单件可以直接拿来改。

关键要点

• 键盘遮挡输入框是 React Native 表单最高频的体验坑，必须修。
• 普通 App 次日留存只有约 25%，表单卡顿是流失的直接推手。
• 用 KeyboardAvoidingView 加可滚动容器、聚焦自动滚动，两端都要真机测。
• 想免费起步，VP0 是挑处理好键盘的原生表单设计、交给 AI 重建的最佳选择。

延伸阅读：想用 SwiftUI 的 FocusState 做验证码输入，参考 OTP 验证码输入 SwiftUI 原生做法。

常见问题

关于键盘遮挡，问得最多的是怎么避让、底部按钮为什么被挡、安卓和 iOS 是否一致。一句话收尾：键盘避让看起来是小事，却直接决定用户能不能顺利填完你最重要的那个表单，体验差一点，转化就差一截。