React Navigation设置animationEnabled为false后页面切换动画仍生效问题

• 导航栈类型不匹配配置项：如果你使用的是@react-navigation/native-stack（原生实现的栈导航），该库不支持animationEnabled配置项，原生栈禁用动画的参数是animation: 'none'，你此前用的animationEnabled是JS实现的@react-navigation/stack的专属参数，两个栈的配置规则完全不通用，这是该问题最高发的原因。
• 配置覆盖：你在Stack.Navigator全局设置的screenOptions会被单个Stack.Screen单独配置的动画参数覆盖，检查你对应标签页面的screen是否单独设置了动画相关属性。
• 自定义标签栏实现逻辑错误：如果你是通过条件渲染直接切换标签页组件，没有走navigation.navigate这类导航栈路由切换逻辑，那么Stack导航的动画配置自然不会生效，动画逻辑由你自己的条件渲染外层容器决定。
• 依赖版本不兼容：如果你的@react-navigation相关依赖跨大版本混用，会导致配置项不生效，可执行npm ls @react-navigation/native检查所有相关依赖的版本一致性。

方案1：使用@react-navigation/native-stack的配置 #

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

// 全局配置禁用动画
<Stack.Navigator
  screenOptions={{
    animation: 'none'
  }}
>
  {/* 注册你的所有标签页路由 */}
</Stack.Navigator>

方案2：使用@react-navigation/stack的配置 #

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

<Stack.Navigator
  screenOptions={{
    animationEnabled: false,
    // 兜底强制覆盖过渡动画时长和效果
    transitionSpec: {
      open: { animation: 'timing', duration: 0 },
      close: { animation: 'timing', duration: 0 },
    },
    cardStyleInterpolator: () => ({
      cardStyle: {},
      overlayStyle: {},
    })
  }}
>
  {/* 注册你的所有标签页路由 */}
</Stack.Navigator>

方案3：条件渲染实现自定义标签的处理 #

如果你没有走导航栈切换，直接用currentTab === 'home' ? <Home/> : <Profile/>这类逻辑切换标签，直接移除标签容器外层的动画组件即可，不需要修改导航配置。

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