fix(frontend): Fix excessive space reserved for the keyboard on the Android login page - #346
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
这次改动正确地把原生 Android 输入法避让与父节点位移解耦;我也检查了登录页的焦点切换、认证锁定和现有 IME 工具测试。下面有一个跨平台回归需要处理。
已验证:tests/unit/screens/LoginScreen.test.tsx 与 tests/unit/shared/ui/useImeOverlap.test.ts 共 17 项通过;目标文件 ESLint 与 npm run typecheck 通过。react-native-web 的 KeyboardAvoidingView 实现不会响应键盘事件,因此移动 Web 的输入法避让仍需保留单独的 visual-viewport 路径。
There was a problem hiding this comment.
审查了登录页的 Android 输入法避让、焦点切换、ScrollView 键盘策略以及认证状态路径。Android 目标行为的改动方向正确,但当前实现回归了已有的移动 Web 输入法适配:useImeOverlap 原本通过 visualViewport 为 Web 提供布局避让,而新的 KeyboardAvoidingView 在 Web 上传入 behavior={undefined},不会替代这条路径。请保留 Web 的 viewport 避让逻辑,并仅在原生平台使用新的键盘布局方案。
验证:git diff --check 通过;目标 Jest/ESLint/Prettier/TypeScript 命令无法在当前 checkout 执行,因为依赖安装不完整,node_modules/.bin/jest 不存在。
改动内容
KeyboardAvoidingView管理输入法弹出后的可用高度。ScrollView使用keyboardDismissMode="none",避免显示焦点输入框时的系统滚动关闭输入法。原始问题
Android 登录页打开输入法后,输入框无法稳定保持输入状态,输入法可能随布局调整或滚动被关闭,导致用户无法继续输入。输入法展开时页面还可能预留超出实际需要的空间。
修复方式
由原生
KeyboardAvoidingView负责输入法弹出后的布局避让,并关闭 AndroidScrollView的拖拽关闭输入法行为,让输入框的焦点和键盘状态在输入过程中保持稳定。这样既能保留输入框可见区域,也不会额外增加一段键盘占位。用户影响
用户在 Android 登录页打开输入法后,可以继续在用户名或密码输入框中输入,可以正常从用户名切换到密码,输入法不会被意外关闭。
验证结果
npm run test:jest -- --runTestsByPath tests/unit/screens/LoginScreen.test.tsx:11 项测试通过npx eslint src/screens/LoginScreen.tsx tests/unit/screens/LoginScreen.test.tsx:通过npx prettier --check src/screens/LoginScreen.tsx tests/unit/screens/LoginScreen.test.tsx:通过npm run typecheck:通过Closes #349