React Native Keyboard Controller 中处理键盘关闭时取消输入框焦点的问题

在使用 React Native Keyboard Controller 库时，开发者可能会遇到一个常见问题：当键盘关闭时（高度变为0），尝试取消输入框焦点会导致 Reanimated 错误。本文将深入分析这个问题并提供两种解决方案。

问题分析

在 React Native 应用中，当键盘关闭时，开发者通常会希望同时取消输入框的焦点。一个直观的做法是在 useKeyboardHandler 的 onEnd 回调中直接调用输入框的 blur() 方法。然而，这种做法会导致以下错误：

ReanimatedError: [Reanimated] Trying to access property `blur` of an object which cannot be sent to the UI runtime.

这个错误的根本原因是 Reanimated 的工作线程（worklet）不能直接访问 React 的 ref 对象。Worklet 运行在 UI 线程，而 React ref 属于 JavaScript 线程，两者之间的通信需要特殊处理。

解决方案一：使用 runOnJS 桥接

第一种解决方案是利用 Reanimated 提供的 runOnJS 方法，将操作桥接回 JavaScript 线程执行：

const blurInput = () => {
  inputRef.current?.blur();
};

useKeyboardHandler(
  {
    onEnd: e => {
      'worklet';
      if (e.height === 0) {
        runOnJS(blurInput)();
      }
    },
  },
  []
);

这种方法的特点是：

1. 定义一个普通的 JavaScript 函数 blurInput 来处理取消焦点操作
2. 在 worklet 中通过 runOnJS 调用这个函数
3. 保持了代码的直观性和可读性

解决方案二：使用 AnimatedRef 和 dispatchCommand

第二种解决方案是使用 Reanimated 的动画引用和命令分发机制：

const animatedRef = useAnimatedRef();

useKeyboardHandler(
  {
    onEnd: e => {
      'worklet';
      if (e.height === 0) {
        dispatchCommand(animatedRef, 'blur');
      }
    },
  },
  []
);

// 在组件中使用 AnimatedTextInput
<AnimatedTextInput ref={animatedRef} />

这种方法的特点是：

1. 使用 useAnimatedRef 创建动画引用
2. 在 worklet 中直接使用 dispatchCommand 发送命令
3. 需要配合 Reanimated 的 AnimatedTextInput 组件使用
4. 完全在 UI 线程执行，性能更优

方案对比与选择建议

两种方案各有优缺点：

方案	优点	缺点	适用场景
runOnJS	实现简单，兼容普通组件	需要线程切换	简单场景，已有代码改造
AnimatedRef	性能更好，纯UI线程操作	需要使用Animated组件	性能敏感场景，新项目

对于大多数应用，方案一已经足够，因为它简单直观且兼容现有代码。只有在性能要求极高的场景下，才需要考虑方案二。

最佳实践建议

1. 在组件卸载时清理事件监听
2. 考虑添加防抖逻辑，避免频繁触发
3. 对于复杂表单，可以结合表单管理库（如 Formik）一起使用
4. 测试不同键盘类型和设备的兼容性

通过以上解决方案，开发者可以优雅地处理键盘关闭时的输入框焦点问题，同时避免 Reanimated 的工作线程限制。