iOS
没什么好讲的,键盘总是浮动覆盖在页面之上,页面无任何变化。有以下特点:
- 支持 keyboard 的所有监听
- 如果是 View 组件,为避免输入框被覆盖,可通过 keyboardavoidingview 组件进行处理
- 如果是 scrollView 等可滚动组件,可使用社区组件 react-native-keyboard-aware-scroll-view 或自行通过 keyboard 监听实现
Android
键盘的行为与 AndroidManifest.xml 配置中的 windowSoftInputMode
有关系,设置值可参考 官方文档,结合 RN,实测结果
1. state***
该类型配置对键盘行文无影响,主要影响页面展示/切换后,键盘初始状态是否打开,对于 RN,尤其是使用 react navigation 的情况,就一个单 Activey,键盘总是关闭的。
2.adjustPan
无论页面内包含什么类型的组件,总表现出如下效果
- 若输入框距离底部高度足够,仅浮动弹出键盘,页面无任何变化
- 若输入框靠近底部,则整个页面向上平移,平移至输入框刚好在键盘顶部,页面上方会移动到屏幕之外
3. adjustResize
RN 默认使用该模式,键盘以浮动形式显示在界面上,键盘弹出时会对页面内的弹性组件进行特殊处理,弹性组件包括:ScrollView
等可滚动组件、使用 flex
布局设置的非固定高度组件
-
页面内无任何弹性组件:
- 页面无任何变化,仅浮动弹出键盘,若输入框靠近底部,可能被键盘覆盖
-
页面内有一个或多个弹性组件
- 页面内固定高度的组件保持不变,所有弹性组件根据权重自动收缩,总收缩高度刚好等于键盘高度,观感上相当于整个页面高度被压缩,键盘显示在页面下方;若输入框在
ScrollView
组件内,还会尝试自动滚动以保证输入框可见性 - 极限情况下,所有弹性组件会收缩为 0,若输入框在弹性组件内,则不可见了;此时页面内仅固定高度组件可见,键盘以浮动形式覆盖在页面,若输入框在非弹性组件内且靠近底部,可能被覆盖(同1)。
- 页面内固定高度的组件保持不变,所有弹性组件根据权重自动收缩,总收缩高度刚好等于键盘高度,观感上相当于整个页面高度被压缩,键盘显示在页面下方;若输入框在
-
另一个特殊情况,这可能是 Android 的一个 bug 或 feature,当使用全屏模式,即不显示 statusBar,比如 RN 中使用
StatusBar.setHidden(true)
,以上两点失效,会降级为adjustPan
模式- 但有办法通过设置修正,让其符合
adjustResize
预期,具体参见 讨论,由于不常用,这里便不再展开
- 但有办法通过设置修正,让其符合
4. adjustUnspecified
- 与
adjustResize
一样,若使用全屏模式,自动降级为adjustPan
模式,需进行其他设置进行修正。 - 根据页面内是否有
ScrollView
等可滚动组件,选择使用adjustResize
或adjustPan
模式,对于 RN 而言,有点诡异- 首次载入页面,无论是否有
ScrollView
,表现为adjustPan
模式 - 页面切换过程中,一旦某个页面用了
ScrollView
,表现为adjustResize
模式 - 猜测时因为 RN 为单 activey 导致的
- 首次载入页面,无论是否有
5. adjustNothing
键盘总是浮动在页面之上,与 iOS 表现相同
但是设置为该值,将无法触发任何 keyboard 监听事件,所有也就没办法像 iOS 那样通过 JS 解决输入框被覆盖的问题。哪怕是其他 adjust***
组件,也仅支持 keyboardDidShow
和 keyboardDidHide
事件;比如想通过设置为 adjustPan
自行解决缩放和滚动问题,由于没有 keyboardWillShow
和 keyboardWillHide
,最终表现效果也不会如原生那样丝滑。
所以:在 Android 下还是保持使用 adjustResize
模式相对最优