如何调整react-navigation v6中material-top-tabs的屏幕动画速度

在React Navigation v6中，确实移除了timingConfig和springConfig这类直接配置动画的属性，但可以通过以下两种方式调整屏幕切换的动画速度：

1. 直接设置动画时长（最简单的方法） #

Material Top Tab Navigator提供了animationDuration属性，直接设置毫秒数值即可控制动画速度，数值越小动画越快：

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        // 自定义动画时长，示例为200毫秒（默认通常为300毫秒左右）
        animationDuration: 200,
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

2. 自定义过渡动画配置（精细控制） #

如果需要更灵活的动画控制（比如调整缓动函数、使用弹簧动画），可以通过transitionSpec属性自定义过渡配置：

import { Animated } from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        transitionSpec: {
          // 打开页面的动画配置
          open: {
            animation: 'timing',
            config: {
              duration: 150, // 动画时长
              easing: Animated.ease, // 自定义缓动函数
            },
          },
          // 关闭页面的动画配置
          close: {
            animation: 'spring',
            config: {
              damping: 10, // 弹簧阻尼
              stiffness: 100, // 弹簧刚度
              mass: 0.5, // 质量参数
            },
          },
        },
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

说明：

• animation可选值为timing（计时动画）或spring（弹簧动画），对应不同的动画类型
• 针对不同动画类型，config里可以设置对应的参数（比如timing的duration、easing；spring的damping、stiffness等）

内容的提问来源于stack exchange，提问作者Dương Trần