Android端StatusBar/Navbar与RN Reanimated useKeyboardAnimated冲突求助

问题背景 #

在Android设备上使用react-native-bars设置状态栏和导航栏时一切正常，但引入react-native-reanimated的useKeyboardAnimated钩子后，状态栏和导航栏出现明显抖动现象。

环境信息 #

• react-native-reanimated: ^3.2.0
• react-native-bars: ^2.2.0
• react-native: 0.71.10
• 测试设备: Pixel 3a真机、Android Studio模拟器

复现步骤 #

1. 克隆测试仓库
2. 执行yarn install安装依赖
3. 运行npx react-native run-android启动应用，触发键盘弹出/收起即可观察到抖动问题

临时规避方案 #

方案1：改用原生Keyboard事件监听替代useKeyboardAnimated #

放弃使用reanimated的useKeyboardAnimated，改用React Native原生Keyboard模块监听键盘状态，手动实现动画逻辑，避免与react-native-bars的原生动画冲突：

import { Keyboard, Animated, useEffect } from 'react-native';

const YourComponent = () => {
  const keyboardHeight = new Animated.Value(0);

  useEffect(() => {
    const handleKeyboardShow = (e) => {
      Animated.timing(keyboardHeight, {
        toValue: e.endCoordinates.height,
        duration: e.duration,
        useNativeDriver: false,
      }).start();
    };

    const handleKeyboardHide = (e) => {
      Animated.timing(keyboardHeight, {
        toValue: 0,
        duration: e.duration,
        useNativeDriver: false,
      }).start();
    };

    const showSub = Keyboard.addListener('keyboardDidShow', handleKeyboardShow);
    const hideSub = Keyboard.addListener('keyboardDidHide', handleKeyboardHide);

    return () => {
      showSub.remove();
      hideSub.remove();
    };
  }, []);

  // 使用keyboardHeight处理布局偏移等逻辑
};

方案2：禁用动画的原生驱动 #

如果必须保留useKeyboardAnimated，尝试在依赖该值的动画中禁用useNativeDriver，减少原生层面的动画冲突：

import { useKeyboardAnimated, useAnimatedStyle } from 'react-native-reanimated';
import Animated from 'react-native-reanimated';

const YourComponent = () => {
  const keyboardHeight = useKeyboardAnimated();

  const animatedStyle = useAnimatedStyle(() => {
    return {
      transform: [{ translateY: -keyboardHeight.value }],
    };
  }, []);

  // 确保Animated组件的动画不使用原生驱动
  return <Animated.View style={animatedStyle} useNativeDriver={false} />;
};

方案3：降级react-native-reanimated版本 #

尝试降级到react-native-reanimated 3.0.x系列版本，部分开发者反馈该版本未出现此冲突问题：

yarn add react-native-reanimated@3.0.2

执行完成后重新运行npx react-native run-android即可。

内容的提问来源于stack exchange，提问作者Hoàng Minh Nguyễn