React Native 键盘问题

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 布局设置的非固定高度组件

1. 页面内无任何弹性组件：

   • 页面无任何变化，仅浮动弹出键盘，若输入框靠近底部，可能被键盘覆盖

2. 页面内有一个或多个弹性组件

   • 页面内固定高度的组件保持不变，所有弹性组件根据权重自动收缩，总收缩高度刚好等于键盘高度，观感上相当于整个页面高度被压缩，键盘显示在页面下方；若输入框在 ScrollView 组件内，还会尝试自动滚动以保证输入框可见性
   • 极限情况下，所有弹性组件会收缩为 0，若输入框在弹性组件内，则不可见了；此时页面内仅固定高度组件可见，键盘以浮动形式覆盖在页面，若输入框在非弹性组件内且靠近底部，可能被覆盖（同1）。

3. 另一个特殊情况，这可能是 Android 的一个 bug 或 feature，当使用全屏模式，即不显示 statusBar，比如 RN 中使用 StatusBar.setHidden(true)，以上两点失效，会降级为 adjustPan 模式

   • 但有办法通过设置修正，让其符合 adjustResize 预期，具体参见 讨论，由于不常用，这里便不再展开

4. adjustUnspecified

1. 与 adjustResize 一样，若使用全屏模式，自动降级为 adjustPan 模式，需进行其他设置进行修正。
2. 根据页面内是否有 ScrollView 等可滚动组件，选择使用 adjustResize 或 adjustPan 模式，对于 RN 而言，有点诡异
   • 首次载入页面，无论是否有 ScrollView，表现为 adjustPan 模式
   • 页面切换过程中，一旦某个页面用了 ScrollView，表现为 adjustResize 模式
   • 猜测时因为 RN 为单 activey 导致的

5. adjustNothing

键盘总是浮动在页面之上，与 iOS 表现相同

但是设置为该值，将无法触发任何 keyboard 监听事件，所有也就没办法像 iOS 那样通过 JS 解决输入框被覆盖的问题。哪怕是其他 adjust*** 组件，也仅支持 keyboardDidShow和 keyboardDidHide 事件；比如想通过设置为 adjustPan 自行解决缩放和滚动问题，由于没有 keyboardWillShow 和 keyboardWillHide，最终表现效果也不会如原生那样丝滑。

所以：在 Android 下还是保持使用 adjustResize 模式相对最优