如何在使用Expo Router的replace()方法时禁用页面跳转动画？

全局禁用所有跳转动画 #

如果希望整个应用的页面跳转都没有动画，直接在根布局文件（_layout.tsx 或 _layout.jsx）里配置Stack导航的screenOptions：

import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack
      screenOptions={{
        animation: 'none',
      }}
    >
      <Stack.Screen name="index" />
      <Stack.Screen name="my-link" />
      {/* 其他页面路由 */}
    </Stack>
  );
}

仅特定跳转禁用动画 #

要是只需要某一次跳转无动画，不用全局修改，直接给router.replace加第二个参数传导航选项就行：

router.replace({
  pathname: '/my-link',
  params: {},
}, {
  animation: 'none', // 关闭这次跳转的动画
});

也可以用useNavigation钩子拿到原生导航对象，调用replace时指定动画选项，效果一致：

import { useNavigation } from 'expo-router';

// 组件内部使用
const navigation = useNavigation();

navigation.replace('/my-link', {}, {
  animation: 'none',
});

额外提示 #

Expo Router基于React Navigation开发，所以React Navigation支持的所有动画配置选项都能这么用，比如还可以通过animationTypeForReplace控制替换页面时的动画类型，按需调整即可。

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