如何在@react-navigation/stack^5.14.4与@react-navigation/native^5.9.4中实现指定页面跳转的动画控制

当然有这种简单的方案！完全符合你想要的通过传递参数来控制动画的思路，在React Navigation 5.x里可以轻松实现。

核心思路是通过路由参数动态控制Profile页面的过渡动画配置，完美适配你想要的调用方式：

1. 配置Stack Navigator的Profile屏幕 #

在定义Stack Navigator时，给Profile页面的options设置一个函数，根据路由参数来决定是否启用动画：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
      <Stack.Screen
        name="Profile"
        component={ProfileScreen}
        options={({ route }) => ({
          // 根据路由参数动态开关动画，默认启用
          animationEnabled: route.params?.animationEnabled ?? true,
          // 可选：更精细控制过渡动画（比如直接用即时过渡）
          transitionSpec: {
            open: route.params?.animationEnabled ?? true 
              ? { animation: 'timing', config: { duration: 300 } }
              : { animation: 'instant' },
            close: route.params?.animationEnabled ?? true
              ? { animation: 'timing', config: { duration: 300 } }
              : { animation: 'instant' },
          },
        })}
      />
    </Stack.Navigator>
  );
}

2. 不同页面的跳转调用 #

• Home -> Profile（带动画）：直接调用replace即可，默认会启用动画：

// HomeScreen中的跳转代码
navigation.replace("Profile");
// 也可以显式传递参数，效果一致
// navigation.replace("Profile", { animationEnabled: true });

• Login -> Profile（跳过动画）：传递animationEnabled: false参数就能跳过动画：

// LoginScreen中的跳转代码
navigation.replace("Profile", { animationEnabled: false });

补充说明 #

• 用animationEnabled参数直接控制屏幕的同名选项是最直接的方式；如果需要更定制化的动画逻辑，比如调整时长、切换动画类型，可以通过transitionSpec做更精细的配置。
• 因为你使用的是replace方法，参数会被准确传递到Profile页面的路由中，不会留下参数残留问题。
• 这种方式只需要在Profile的屏幕配置中做一次动态判断，不需要修改其他页面的逻辑，非常简洁高效。

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