故障排除

修复 Expo 路由设置的常见问题。


React Native DevTools 中缺少文件或源映射

¥Missing files or source maps in React Native DevTools

如果你的 Chrome DevTools 在其忽略列表中有排除项,则可能会发生这种情况。要解决此问题,请使用 React Native DevTools

¥This can happen if your Chrome DevTools has exclusions within its ignore list. To fix the issue, use React Native DevTools:

  1. 通过在终端窗口中运行的开发服务器中按 J 启动 React Native DevTools

    ¥Start the React Native DevTools by pressing J from the development server running in the terminal window

  2. 单击齿轮图标打开“设置”

    ¥Open Settings by clicking the gear icon

  3. 在扩展下,单击恢复默认值并重新加载

    ¥Under Extensions, click Restore defaults and reload

  4. 再次打开“设置”,然后转到“忽略列表”选项卡

    ¥Open Settings again, and go to Ignore List tab

  5. 取消选中 /node_modules/ 的任何排除项

    ¥Uncheck any exclusions for /node_modules/

EXPO_ROUTER_APP_ROOT 未定义

¥EXPO_ROUTER_APP_ROOT not defined

如果未定义 process.env.EXPO_ROUTER_APP_ROOT,你将看到以下错误:

¥If process.env.EXPO_ROUTER_APP_ROOT is not defined you'll see the following error:

Terminal
Invalid call at line 11: process.env.EXPO_ROUTER_APP_ROOT First argument of require.context should be a string.

当项目 babel.config.js 中未使用 Babel 插件 expo-router/babel 时,可能会发生这种情况。你可以尝试使用以下方法清除缓存:

¥This can happen when the Babel plugin expo-router/babel is not used in the project babel.config.js. You can try clearing the cache with:

Terminal
npx expo start --clear

或者,你可以通过在项目的根目录中创建一个包含以下内容的 index.js 文件来规避此问题:

¥Alternatively, you can circumvent this issue by creating an index.js file in the root of your project with the following contents:

index.js
import { registerRootComponent } from 'expo';
import { ExpoRoot } from 'expo-router';

// Must be exported or Fast Refresh won't update the context
export function App() {
  const ctx = require.context('./app');
  return <ExpoRoot context={ctx} />;
}

registerRootComponent(App);

不要使用它来更改根目录(应用),因为它不会考虑在任何其他地方的使用。

¥Do not use this to change the root directory (app) as it won't account for usage in any other places.

require.context 未启用

¥require.context not enabled

当使用未启用上下文模块的自定义版本的 @expo/metro-config 时,可能会发生这种情况。Expo Router 要求项目 Metro.config.js 使用 expo-router/metro 作为默认配置。删除 metro.config.js,或扩展 expo/metro-config。请参阅 定制 Metro 了解更多信息。

¥This can happen when using a custom version of @expo/metro-config that does not enable context modules. Expo Router requires the project metro.config.js to use expo-router/metro as the default configuration. Delete the metro.config.js, or extend expo/metro-config. See Customizing metro for more information.

缺少后退按钮

¥Missing back button

如果你设置了一个模式或另一个预计有后退按钮的屏幕,那么你需要将 unstable_settings 添加到路由的布局中,以确保配置初始路由。初始路由对于移动应用来说有些独特,并且在系统中显得有些笨拙 - 有待改进。

¥If you set up a modal or another screen that is expected to have a back button, then you'll need to add unstable_settings to the route's layout to ensure the initial route is configured. Initial routes are somewhat unique to mobile apps and fit awkwardly in the system — improvements pending.

app/_layout.tsx
export const unstable_settings = {
  initialRouteName: 'index',
};