React Native构建时卡在启动页，npx expo start运行正常求助

应用通过expo run:android构建安装后卡在启动页，但使用npx expo start或npx expo start --no-dev --minify运行完全正常。尝试过adb查看日志，但未找到有效线索。

Navigation.jsx #

import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { Image, TouchableOpacity } from 'react-native';
import React from 'react';
import Main from './Main';
import CustomDrawer from './CustomDrawer';
import { Ionicons } from '@expo/vector-icons';
import Explorar from './Explorar';
import DetallNoticia from './DetallNoticia';
import Notificacions from './config/Notificacions';
import Configurar from './Configurar';
import { Share } from 'react-native';
import categories from '../data/categories';
import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

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

function NavegationDrawerApp() {
  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawer {...props} />}
      screenOptions={{
        drawerActiveBackgroundColor: '#eb4947',
        drawerActiveTintColor: '#fff',
        drawerInactiveTintColor: '#000',
        headerTintColor: '#fff',
        drawerLabelStyle: {
          marginLeft: -10,
          fontSize: 15,
        },
        headerTitle: () => (
          <Image source={require('../../assets/img/logo.jpg')} style={{ width: 200, height: 50, resizeMode: 'contain', borderRadius: 10, }} />
        ),
        headerTitleAlign: 'center',
        headerBackground: () => (
          <Image
            style={{ flex: 1, width: '100%', height: '100%', resizeMode: 'cover' }}
            source={require('../../assets/img/REDBG.jpg')}
          />
        ),
      }}
    >
      <Drawer.Screen name="Portada" component={Main} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="trending-up" size={22} color={color} />
        ),
        menu: true
      }} />

      <Drawer.Screen name="Societat" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="people-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Política" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="megaphone-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Economia" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="wallet-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Cultura" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="ribbon-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Vins i caves" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="wine-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Mon Casteller" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="body-outline" size={22} color={color} />
        ),
      }} />

      <Drawer.Screen name="Esports" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="football-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Entrevistes" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="book-outline" size={22} color={color} />
        ),
      }} />
      <Drawer.Screen name="Salut" component={Explorar} options={{
        drawerIcon: ({ color }) => (
          <Ionicons name="medkit-outline" size={22} color={color} />
        ),
      }} />
    </Drawer.Navigator>
  );
}

const MainNavigation = ({ notiTouched }) => {
  const navigation = useNavigation();

  useEffect(() => {
    if (notiTouched) {
      navigation.navigate('DetallNoticia', { noticia: notiTouched });
    }
  }, [notiTouched])

  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: true,
        headerTitleAlign: "center",
        headerTitleStyle: { fontSize: 18, fontWeight: "bold" },
        headerStyle: {
          borderBottomWidth: 1,
          borderBottomColor: "black",
        },
      }}
    >
      <Stack.Screen
        name="-"
        component={NavegationDrawerApp}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="DetallNoticia"
        component={DetallNoticia}
        options={({ route }) => ({
          headerShown: true, title: "", headerStyle: { borderBottomWidth: 0, },
          headerRight: () => (<TouchableOpacity style={{ marginRight: 20 }}
            onPress={() => {
              fetch('https://cargol.outlius.com/noticies/' + route.params.noticia)
                .then(response => response.json())
                .then(data => {
                  let catName = categories.find(category => category.ID == data[0].category)?.nom.toLowerCase();
                  catName = catName.replace(/ /g, "-");
                  let urlShare = "https://elcargol.com/" + catName + "/" + data[0].id + "-" + data[0].alias;

                  Share.share({
                    message: data[0].titol + "\n" + urlShare
                  });
                })
            }} >
            <Ionicons name="share-social-outline" size={22} color="black" />
          </TouchableOpacity>),
        })}
      />
      <Stack.Screen name="Notificacions" component={Notificacions}
        options={{
          headerShown: true,
          headerStyle: {
            borderBottomWidth: 0,
          },
        }}
      />
      <Stack.Screen name="Configurar" component={Configurar}
        options={{
          headerShown: true,
          headerStyle: {
            borderBottomWidth: 0,
          },
        }}
      />
    </Stack.Navigator>
  );
};

export default MainNavigation;

Package.json #

{
  "name": "app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "@react-native-async-storage/async-storage": "1.18.2",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/stack": "^6.3.17",
    "expo": "^49.0.0",
    "expo-device": "~5.4.0",
    "expo-font": "~11.4.0",
    "expo-notifications": "~0.20.1",
    "expo-splash-screen": "~0.20.5",
    "expo-status-bar": "~1.6.0",
    "moment": "^2.29.4",
    "react": "18.2.0",
    "react-icons": "^4.10.1",
    "react-native": "0.72.4",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-progress-steps": "^1.3.4",
    "react-native-reanimated": "~3.3.0",
    "react-native-render-html": "^6.3.4",
    "react-native-svg": "13.9.0",
    "react-native-vector-icons": "^9.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

排查及解决步骤 #

1. 闪屏页配置检查

   • 确认app.json/app.config.js中expo-splash-screen配置，确保没有设置无限保留闪屏的逻辑，同时检查AppEntry中是否正确调用expo-splash-screen.hideAsync()。

2. 资源打包验证

   • 清理预构建文件：执行expo prebuild --clean后重新构建，排查图片等静态资源是否在生产包中正常打包。
   • 检查代码中相对路径的资源引用（如require('../../assets/img/logo.jpg')）是否存在路径错误。

3. 导航与动画库配置

   • 确认babel.config.js中已添加react-native-reanimated插件：

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

   • 调整MainNavigation中的useEffect逻辑，添加notiTouched的空值判断，避免生产环境下导航阻塞。

4. 日志深度排查

   • 使用adb logcat *:E过滤错误日志，或expo logs --android查看生产构建后的完整日志。
   • 在AppEntry中添加全局错误捕获：

     import { ErrorUtils } from 'react-native';
     ErrorUtils.setGlobalHandler((error, isFatal) => {
       console.log('全局错误:', error, isFatal);
     });
     

5. 依赖兼容性处理

   • 替换react-native-vector-icons为@expo/vector-icons，避免与Expo版本冲突。
   • 执行npm cache clean --force后重新安装依赖，解决潜在的依赖缓存问题。

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