升级Drawer Navigation 6后自定义抽屉滑动动画失效求助

问题原因 #

• Drawer Navigation v6 中 drawerContent 回调返回的 progress 是 react-native-reanimated 的共享值（SharedValue），不再是 v5 版本的 Animated.Value，你通过 useState 存储该值再触发重渲染的方式无法驱动 UI 线程的动画执行。
• 你使用的 interpolateNode 是 react-native-reanimated v1 的API，升级后的 v2/v3 版本已经废弃该API，替换为 interpolate 方法。
• 动画样式计算需要走 reanimated 的响应式更新逻辑，不能绑定到普通 React state 上。

修复方案 #

首先确认你的导入路径正确，所有动画相关API都从 react-native-reanimated 引入，不要用 React Native 自带的 Animated 模块。

修改后代码如下：

import Animated, { useSharedValue, useDerivedValue, interpolate } from 'react-native-reanimated';
import { Drawer } from '@react-navigation/drawer';

const CustomDrawer = ({navigation}) => {
  // 用reanimated的共享值存储进度
  const progress = useSharedValue(0);

  // 用useDerivedValue响应式计算动画样式
  const animatedStyle = useDerivedValue(() => {
    const scale = interpolate(progress.value, [0, 1], [1, 0.8]);
    const borderRadius = interpolate(progress.value, [0, 1], [0, 26]);
    return {
      borderRadius,
      transform: [{ scale }]
    };
  });

  return (
    <View style={{flex: 1, backgroundColor: COLORS.primary}}>
      <Drawer.Navigator
        screenOptions={{
          headerShown: false,
          sceneContainerStyle: {backgroundColor: 'transparent'},
          drawerType: 'slide',
          drawerStyle: {
            flex: 1,
            width: '65%',
            paddingRight: 20,
            backgroundColor: 'transparent',
          },
        }}
        drawerContent={props => {
          // 直接更新共享值，不会触发JS重渲染
          progress.value = props.progress;
          return <CustomContentDrawer navigation={props.navigation} />;
        }}>
        <Drawer.Screen name="MainLayout">
          {props => (
            <MainLayout
              {...props}
              drawerAnimationStyle={animatedStyle}
              navigation={navigation}
            />
          )}
        </Drawer.Screen>
      </Drawer.Navigator>
    </View>
  );
};

const MainLayout = ({drawerAnimationStyle, navigation}) => {
  return (
    <Animated.View
      style={{
        flex: 1,
        backgroundColor: 'white',
        // 直接传入动画值即可，reanimated会自动处理更新
        ...drawerAnimationStyle.value
      }}>
      <Text>MainLayout</Text>
    </Animated.View>
  );
};

额外检查项 #

• 确认你已经在 babel.config.js 中添加了 reanimated 的插件配置：

  module.exports = {
    presets: [
      // 其他预设保持不变
    ],
    plugins: [
      // 其他插件保持不变
      'react-native-reanimated/plugin',
    ],
  };
  

• 修改配置后需要清空缓存重启项目：npx react-native start --reset-cache

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