React Native Expo 重新加载后“屏幕不存在”错误故障排除指南

Android

2024-03-26 18:57:00

## React Native Expo 中重新加载后“屏幕不存在”错误的故障排除

问题概述

在使用基于文件路由的 expo-router 的 React Native Expo 项目中，用户可能会在 Android 模拟器上重新加载应用程序后遇到“屏幕不存在”错误页面。本文将深入探讨此问题的根源，并提供详细的解决方法。

原因分析

此错误通常是由以下原因之一引起的：

导航器配置不当： Tabs 导航器的 screenOptions 中可能禁用了静态呈现头部。
旧路由存在： 不再使用的旧路由和代码可能仍在项目中，导致重新加载时出现错误。

解决步骤

要解决此问题，请遵循以下步骤：

1. 检查导航器设置

在 app/(tabs)/_layout.tsx 文件中，确保 Tabs 导航器的 screenOptions 中未禁用静态呈现头部，即：

screenOptions={{
  tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
  headerShown: useClientOnlyValue(false, true),
}}

2. 删除旧路由

删除所有不再使用的旧路由和指向这些路由的文件。确保旧代码和路由不再被引用。

3. 重新编译项目

只需重新编译项目即可，无需重新开始。在终端中运行以下命令：

expo start

示例代码

以下是 app/(tabs)/_layout.tsx 文件的示例代码：

import React from 'react';
import { Link, Tabs } from 'expo-router';
import { Pressable } from 'react-native';

import Colors from '@/constants/Colors';
import { useColorScheme } from '@/components/useColorScheme';
import { useClientOnlyValue } from '@/components/useClientOnlyValue';

function TabBarIcon(props: {
  name: React.ComponentProps<typeof FontAwesome>['name'];
  color: string;
}) {
  return <FontAwesome size={28} style={{ marginBottom: -3 }} {...props} />;
}

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: useClientOnlyValue(false, true),
      }}>
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="user" color={color} />,
        }}
      />
      <Tab.Screen
        name="Two"
        component={Two}
        options={{
          tabBarIcon: ({ color }) => <TabBarIcon name="list" color={color} />,
        }}
      />
    </Tabs>
  );
}