配置导航过渡

学习如何在 Expo Router 中使用 React 过渡进行导航。

重要这是一个在 Expo SDK 58 及更高版本可用的实验性功能。

Expo Router 可以在 React 转场中处理导航。转场会在下一个屏幕挂起时保持当前屏幕可见。

🌐 Expo Router can process navigation inside a React transition. A transition keeps the current screen visible while the next screen suspends.

在根布局渲染之前设置过渡模式：

🌐 Set the transition mode before the root layout renders:

src/app/_layout.tsx

import { router, Stack } from 'expo-router';

router.setTransitionMode('always');

export default function RootLayout() {
  return <Stack />;
}

选择一种过渡模式

🌐 Choose a transition mode

使用这些模式来配置 Expo Router 何时开始过渡：

🌐 Use these modes to configure when Expo Router starts transitions:

模式	行为
`preload-only`	使用过渡效果进行预加载。这是默认设置。
`always`	对所有排队的导航操作使用过渡效果。
`never`	从不使用过渡效果。单个操作无法覆盖此设置。

使用 inTransition 来覆盖单个操作的模式。never 模式无法被覆盖。

🌐 Use inTransition to override the mode for an individual operation. The never mode cannot be overridden.

router.push('/details', { inTransition: true });
router.back({ inTransition: false });

信息当 Expo Router 批量处理操作时，每个操作都必须允许过渡，批处理才能使用一个过渡。

显示待处理导航

🌐 Show pending navigation

用 unstable_useIsNavigating() 来检查导航是否在排队或待处理：

🌐 Use unstable_useIsNavigating() to check whether navigation is queued or pending:

import { unstable_useIsNavigating } from 'expo-router';
import { ActivityIndicator } from 'react-native';

export function NavigationProgress() {
  const isNavigating = unstable_useIsNavigating();

  return <ActivityIndicator animating={isNavigating} />;
}

这个 hook 不会报告同步导航或原生返回手势。完整的 API 信息请查看 Expo Router API 参考。

🌐 The hook does not report synchronous navigation or native back gestures. See the Expo Router API reference for the complete API.