React Native Expo项目中出现未使用默认导出错误的原因？

问题现象 #

• 模拟器显示空白白屏
• Web端口显示空白白屏
• App.js出现"未使用默认导出"的提示

已尝试的排查步骤 #

• 卸载所有React Navigation依赖
• 重新安装所有React Navigation依赖

相关代码文件 #

App.js #

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './Components/StackNavigator';

export default function App() {

    return (
        <NavigationContainer>
            <StackNavigator />
        </NavigationContainer>
    );
}

StackNavigator.js #

import React from 'react';
import 'react-native-gesture-handler';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import ResumeScreen from './ResumeScreen';

const StackNavigator = () => {

    const Stack = createNativeStackNavigator();
    const Drawer = createDrawerNavigator();

    return (
        <Drawer.Navigator>
            <Stack.Navigator>
                <Stack.Screen
                    name="Home"
                    component={HomeScreen}
                />
                <Stack.Screen
                    name="Resume"
                    component={ResumeScreen}
                />
            </Stack.Navigator>
        </Drawer.Navigator>
    );
};

export default StackNavigator;

package.json #

{
  "name": "portfolio",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/webpack-config": "^0.17.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/drawer": "^6.5.6",
    "@react-navigation/native": "^6.1.1",
    "@react-navigation/native-stack": "^6.9.7",
    "expo": "~47.0.8",
    "expo-device": "~5.0.0",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-dom": "^18.1.0",
    "react-native": "0.70.5",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-reanimated": "~2.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-svg": "13.4.0",
    "react-native-web": "^0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

解决方案 #

1. 修复导航嵌套错误 #

当前StackNavigator.js的导航嵌套逻辑错误：Drawer.Navigator的子元素必须是Drawer.Screen，不能直接嵌套Stack.Navigator。以下是两种正确的嵌套方式：

方式一：将Stack作为Drawer的单个屏幕内容

import React from 'react';
import 'react-native-gesture-handler';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './HomeScreen';
import ResumeScreen from './ResumeScreen';

const StackNavigator = () => {
    const Stack = createNativeStackNavigator();
    const Drawer = createDrawerNavigator();

    // 定义Stack导航
    const HomeStack = () => (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Resume" component={ResumeScreen} />
        </Stack.Navigator>
    );

    // 将Stack作为Drawer的一个屏幕
    return (
        <Drawer.Navigator>
            <Drawer.Screen 
                name="HomeStack" 
                component={HomeStack} 
                options={{ title: '主页' }} 
            />
            // 可添加其他Drawer屏幕
        </Drawer.Navigator>
    );
};

export default StackNavigator;

方式二：直接使用Stack导航（若不需要Drawer）

const StackNavigator = () => {
    const Stack = createNativeStackNavigator();

    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Resume" component={ResumeScreen} />
        </Stack.Navigator>
    );
};

2. 调整Gesture Handler导入位置 #

react-native-gesture-handler必须在项目入口的最顶部导入，将其移至App.js第一行：

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import StackNavigator from './Components/StackNavigator';

export default function App() {
    return (
        <NavigationContainer>
            <StackNavigator />
        </NavigationContainer>
    );
}

3. 处理"未使用默认导出"提示 #

该提示多为编辑器/ESLint误报，可通过以下方式解决：

• 重启编辑器或ESLint服务，清除缓存
• 确认App.js的默认导出已被Expo入口正确加载（无需额外修改代码）

4. 清除缓存并重启项目 #

执行命令清除Expo缓存后重新启动：

expo start -c

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