使用React Navigation时Expo启动页在Android构建中无法隐藏的问题及解决

开发者阿泽

2026-6-25

这是我在Stack Overflow的第一篇帖子，还请多多包涵。我遇到了一个问题——在使用React Navigation导航器时，Expo启动页在Android预览构建中无法隐藏，哪怕是最小示例也会出现这个问题。现在问题已经解决，特将方案分享给有同样困扰的开发者。

我的项目采用标准配置：在字体加载完成、应用准备就绪前显示启动页，就绪后隐藏启动页并渲染React导航器。这个逻辑在Expo Go里正常工作，但在Android预览构建中，启动页始终无法隐藏。而且问题只和React Navigation相关，把导航器换成其他组件就一切正常。

我尝试了各种调试手段，但因为问题只出现在Android构建环境中，调试难度很大。下面是复现问题的示例代码（基本复制自Expo和React Navigation官方文档）：

import React, { useCallback, useEffect, useState } from 'react';
import { Text, View } from 'react-native';
import Entypo from '@expo/vector-icons/Entypo';
import * as Font from 'expo-font';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import * as SplashScreen from 'expo-splash-screen';

// Keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync();

const Stack = createNativeStackNavigator();

export default function App() {
  const [appIsReady, setAppIsReady] = useState(false);

  useEffect(() => {
    async function prepare() {
      try {
        await Font.loadAsync(Entypo.font);
      } catch (e) {
        console.warn(e);
      } finally {
        // Tell the application to render
        setAppIsReady(true);
      }
    }
    prepare();
  }, []);

  const onLayoutRootView = useCallback(async () => {
    if (appIsReady) {
      await SplashScreen.hideAsync();
    }
  }, [appIsReady]);

  if (!appIsReady) {
    return null;
  }

  return (
    <View onLayout={onLayoutRootView} style={{flex: 1}} >
      <NavigationContainer >
        <Stack.Navigator>
        <Stack.Screen name="Home Screen" component={HomeScreen} options={{ title: 'Oops!' }} />
        </Stack.Navigator>
      </NavigationContainer>
    </View>
  );
}

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>This is the Home Screen</Text>
    </View>
  );
}

我使用的版本：

expo ^50.0.17
@react-navigation/native-stack ^6.9.26

我还创建了全新的最小项目测试，结果一致：Expo Go中启动页能正常隐藏，Android构建中不行。

我的package.json内容如下：

{
  "name": "gafapp4",
  "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": {
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "expo": "~50.0.14",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "expo-splash-screen": "~0.26.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  },
  "private": true
}

如前文所述，我已经找到并解决了问题，只需要安装以下依赖包：

react-native-safe-area-context
react-native-screens
react-native-tab-view
react-native-pager-view（用于material-top-tab-navigator）

其实React Navigation从5.x升级到6.x的指南里已经明确说明了这些依赖要求，是我之前没仔细看文档才踩了坑。

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