React Native Keyboard Controller 在 iOS 上处理 Emoji 键盘高度问题的解决方案

在 React Native 开发中，键盘高度的动态获取是一个常见需求。react-native-keyboard-controller 库提供了 useKeyboardHandler 钩子来监听键盘状态变化，但在 iOS 平台上切换至 Emoji 键盘时可能会遇到高度不更新的问题。

问题现象

当用户在 iOS 设备上从常规键盘切换至 Emoji 键盘时，useKeyboardHandler 的 onMove 事件回调没有被触发，导致键盘高度值没有及时更新。这会引发界面布局问题，特别是对于那些需要根据键盘高度动态调整布局的应用场景。

问题根源

经过分析，这个问题源于 iOS 平台的特殊行为：

1. 动画帧缺失：在键盘切换过程中，iOS 系统可能采用即时切换而非动画过渡，导致没有产生动画帧
2. 事件触发机制：useKeyboardHandler 的 onMove 回调设计为仅在动画帧期间触发
3. Emoji 键盘特性：Emoji 键盘的高度通常与常规键盘不同，但系统可能不会为这种切换生成动画事件

解决方案

要确保键盘高度值始终与当前键盘状态同步，开发者应该同时使用 onMove 和 onEnd 两个回调：

useKeyboardHandler(
  {
    onMove: (event) => {
      'worklet'
      height.value = Math.max(event.height, 0)
    },
    onEnd: (event) => {
      'worklet'
      height.value = Math.max(event.height, 0)
    },
  },
  []
)

这种双重保障机制能够：

1. 在键盘有动画变化时通过 onMove 实时更新高度
2. 在键盘状态最终确定时通过 onEnd 确保高度值同步
3. 覆盖所有可能的键盘状态变化场景，包括无动画的即时切换

最佳实践建议

1. 始终同时实现 onMove 和 onEnd：即使当前看起来只需要其中一个，为未来可能的场景变化预留空间
2. 高度值处理：使用 Math.max 确保高度值不为负，避免布局问题
3. 跨平台考虑：虽然这个问题在 iOS 上更明显，但统一实现可以保证各平台行为一致
4. 性能优化：由于这些回调在 UI 线程执行，确保其中的逻辑尽可能轻量

总结

react-native-keyboard-controller 库提供了强大的键盘交互能力，但需要开发者理解其事件触发机制。通过合理使用 onMove 和 onEnd 回调，可以构建出在各种键盘场景下都能稳定工作的界面布局。这个问题也提醒我们，在移动开发中，特别是涉及系统原生组件交互时，考虑各种边界情况和平台特性至关重要。