React Native Keyboard Controller 中 Stack Navigator 返回导航时父屏幕 KeyboardToolbar 动画问题解析

在 React Native 开发中，使用 Stack Navigator 进行页面导航时，如果多个屏幕都包含 KeyboardToolbar 组件，可能会遇到一个特殊的动画问题：当用户从子屏幕返回父屏幕时，父屏幕的 KeyboardToolbar 会在背景中出现并消失的异常动画效果。

这个问题主要源于 React Navigation 的 Stack Navigator 在页面过渡时的渲染机制。在导航过程中，两个屏幕会同时存在于视图层级中，而 KeyboardToolbar 组件默认会对键盘状态变化做出响应，导致两个工具栏同时触发动画。

解决方案的核心思路是通过 useIsFocused 钩子来判断当前屏幕是否处于聚焦状态，从而控制 KeyboardToolbar 的激活状态。具体实现如下：

1. 在组件中引入 useIsFocused 钩子：

const isFocused = useIsFocused();

2. 将 isFocused 传递给 KeyboardToolbar 的 enabled 属性：

<KeyboardToolbar enabled={isFocused} />

3. 在 KeyboardStickyView 内部，需要正确处理偏移量计算：

const stickyViewStyle = useAnimatedStyle(() => {
  const offset = interpolate(progress.value, [0, 1], [closed, opened]);
  
  return {
    transform: [{ translateY: enabled ? height.value + offset : closed }],
  };
}, [closed, opened, enabled]);

这个解决方案的关键点在于：

• 当屏幕失去焦点时，立即将工具栏定位到关闭状态(closed)
• 避免在非活动屏幕上响应键盘状态变化
• 保持动画平滑过渡的同时防止视觉干扰

对于 React Native 开发者来说，理解这种导航过程中的组件生命周期和状态管理非常重要。特别是在处理键盘相关组件时，需要考虑多个屏幕同时存在的场景，确保动画和交互的正确性。

这种解决方案不仅适用于 KeyboardToolbar，也可以推广到其他需要在页面导航时精确控制显示/隐藏行为的组件。通过合理利用 React Navigation 提供的焦点状态信息，可以构建出更加稳定和流畅的导航体验。