React Navigation 6的useDrawerProgress Hook失效导致抽屉动画无法运行

你遇到的useDrawerProgress不生效核心是以下几个常见错误，按顺序排查修改即可： #

1. 必做前置检查 #

• 确保已安装react-native-reanimated v2/v3版本，且在babel.config.js中添加了插件配置（必须放在plugins数组最后一位）：

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

配置完成后要清空缓存重启项目：npx react-native start --reset-cache

2. 核心代码错误修复 #

你当前的写法不符合react-native-reanimated v2+的语法规则：

• 不能直接创建动画样式，必须用useAnimatedStyle Hook包裹
• interpolateNode已废弃，替换为interpolate
• 必须导入react-native-reanimated提供的Animated组件，不能用react-native自带的Animated

修改后的StackScreens代码如下：

import Animated, { useAnimatedStyle, interpolate } from 'react-native-reanimated';
import { useDrawerProgress } from '@react-navigation/drawer';

function StackScreens({ navigation }) {
  const progress = useDrawerProgress();

  // 必须用useAnimatedStyle创建动态动画样式
  const drawerAnimationStyle = useAnimatedStyle(() => {
    const scale = interpolate(progress.value, {
      inputRange: [0, 1],
      outputRange: [1, 0.8],
    });
    return {
      transform: [{ scale }],
    };
  });

  return (
    <Animated.View style={{ flex: 1, ...drawerAnimationStyle }}>
      <ScreenStack.Navigator>
        <ScreenStack.Screen
          name="HomeScreen"
          options={{ headerShown: false, animation: "slide_from_bottom" }}
          component={HomeScreen}
        />
        <ScreenStack.Screen
          name="Chapters"
          component={ChapterScreen}
          options={{
            headerShown: false,
            animation: "slide_from_right",
            presentation: "modal",
          }}
        />
        <ScreenStack.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            headerShown: false,
            animation: "slide_from_right",
            presentation: "modal",
          }}
        />
        <ScreenStack.Screen
          name="Setting"
          component={SettingScreen}
          options={{
            headerShown: false,
            animation: "slide_from_right",
            presentation: "modal",
          }}
        />
      </ScreenStack.Navigator>
    </Animated.View>
  );
}

3. 可选适配调整 #

如果修改后还是没有效果，把Drawer.Screen的drawerType从slide改为front，避免抽屉默认滑动逻辑覆盖自定义缩放样式：

<Drawer.Screen
  name="Home"
  options={{
    headerShown: false,
    swipeEdgeWidth: 50,
    drawerType: "front", // 替换原来的slide
    overlayColor: "transparent",
    drawerStyle: {
      width: "50%",
      backgroundColor: "transparent",
    },
    sceneContainerStyle: { backgroundColor: "transparent" },
  }}
>
  {(props) => <StackScreens {...props} />}
</Drawer.Screen>

内容的提问来源于stack exchange，提问作者Zahal A_Omer