React Native Reanimated V2抽屉缩放圆角动画失效问题求助

问题原因 #

升级Reanimated V2后，原代码依赖的interpolateNodeAPI已被废弃，且Animated.Value的用法与V2新架构不兼容，同时通过setTimeout传递进度值的方式会导致动画不同步，最终造成效果失效。

修复后的代码 #

自定义Drawer组件 #

import React from 'react';
import { View } from 'react-native';
import { Drawer } from '@react-navigation/drawer';
import Animated, { useSharedValue, useAnimatedStyle, interpolate } from 'react-native-reanimated';
import CustomContentDrawer from './CustomContentDrawer'; // 替换为你的自定义抽屉内容组件路径
import { COLORS } from './your-color-config'; // 替换为你的颜色配置文件路径

const CustomDrawer = () => {
  const navigation = useNavigation();
  // 使用Reanimated V2的useSharedValue替代旧版Animated.Value
  const progress = useSharedValue(0);

  // 通过useAnimatedStyle创建动画样式，确保动画运行在UI线程
  const animatedStyle = useAnimatedStyle(() => {
    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.darkGreen }}>
      <Drawer.Navigator
        screenOptions={{
          headerShown: false,
          sceneContainerStyle: { backgroundColor: 'transparent' },
          drawerType: 'slide',
          drawerStyle: {
            flex: 1,
            width: '65%',
            paddingRight: 20,
            backgroundColor: 'transparent',
          },
        }}
        drawerContent={(props) => {
          // 直接更新共享值同步抽屉进度，无需setTimeout
          progress.value = props.progress.value;
          return <CustomContentDrawer navigation={navigation} />;
        }}>
        <Drawer.Screen name="MainLayout">
          {(props) => <MainLayout {...props} drawerAnimationStyle={animatedStyle} />}
        </Drawer.Screen>
      </Drawer.Navigator>
    </View>
  );
};

export default CustomDrawer;

首页MainLayout组件 #

import Animated from 'react-native-reanimated';
import { Text, View } from 'react-native';

const MainLayout = ({ drawerAnimationStyle }) => {
  return (
    <Animated.View
      style={[
        {
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'white',
        },
        drawerAnimationStyle,
      ]}>
      <Text>MainLayout</Text>
    </Animated.View>
  );
};

export default MainLayout;

关键改动说明 #

• 替换Animated.Value为useSharedValue：Reanimated V2核心API，用共享值管理动画状态，性能更稳定。
• 用useAnimatedStyle替代手动拼接样式：自动将动画逻辑移至UI线程，避免JS线程阻塞导致的卡顿。
• 替换interpolateNode为interpolate：V2已废弃interpolateNode，统一使用interpolate完成值映射。
• 移除setTimeout：直接通过props.progress.value更新共享值，确保动画与抽屉滑动完全同步。

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