Expo项目从Snack导出后卡在启动页，Android与Web端无法显示

问题现象 #

在Expo Snack中开发的计算器项目运行完全正常，但导出到外部代码编辑器后，App卡在启动页，Android和Web端均无内容显示。

App.js代码 #

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native'
import DrawerNavigator from './components/DrawerNavigator'

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

package.json代码 #

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~47.0.8",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "tinydb": "*",
    "expo-constants": "~14.0.2",
    "@expo/vector-icons": "^13.0.0",
    "react-native-paper": "4.9.2",
    "react-native-screens": "~3.18.0",
    "react-native-reanimated": "~2.12.0",
    "@react-navigation/drawer": "^5.7.2",
    "@react-navigation/native": "^5.0.5",
    "react-native-vector-icons": "*",
    "react-native-gesture-handler": "~2.8.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-responsive-fontsize": "*",
    "react-native-web": "~0.18.9",
    "react-dom": "18.1.0",
    "@expo/webpack-config": "^0.17.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

排查与解决步骤 #

1. 确保依赖完整安装 #

导出项目后先执行依赖安装命令，本地环境不会自动处理依赖：

npm install
# 或使用yarn
yarn install

2. 配置Reanimated的Babel插件 #

项目使用了react-native-reanimated但缺少Babel插件配置，这会导致抽屉导航初始化失败，直接卡住启动页。
在项目根目录新建或修改babel.config.js：

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'],
  };
};

修改后必须重启Expo开发服务器才能生效。

3. 验证DrawerNavigator组件 #

临时替换App.js内容，测试基础渲染是否正常：

import * as React from 'react';
import { View, Text } from 'react-native';

export default function App(){
  return(
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>测试内容</Text>
    </View>
  )
}

如果测试组件能正常显示，说明问题出在DrawerNavigator或其内部组件，需排查导航配置、嵌套组件的语法/逻辑错误。

4. 清除缓存重启服务 #

Expo缓存可能导致异常，执行命令清除缓存后重启：

expo start -c

5. 排查Web端报错 #

Web端无内容时，打开浏览器开发者工具查看Console面板的错误信息，针对性修复。react-native-reanimated在Web环境下可能存在兼容问题，可结合错误提示调整配置或组件逻辑。

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