由于React Navigator

Question

这是我在Stackoverflow上的第一篇文章，所以和我在一起。

I在使用React Navigation Navigator时，即使在最小的示例中，使用React Navigation Navigator时，就发布了一个有关Expo Splash屏幕在我的Android预览中不隐藏的问题。同时我已经解决了它（请参阅下文），但我将帖子留给任何遇到同一问题的人。

I有一个标准设置，显示了启动屏幕，直到加载字体并准备就绪。那一刻，溅出屏幕应隐藏，应渲染反应导航器。这是Expo GO中预期的工作，但是在预览中构建了飞溅屏幕并没有隐藏。这是反应导航器的特定于。如果我用另一个组件替换导航器，则一切都很好。 我试图尽可能地进行调试，但这似乎很困难，因为问题仅发生在Android构建中。我的失败示例的代码如下（基本上是从Expo Homepage复制/粘贴的React Navigation Homepage）。

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-nvigation/native-stack ^6.9.26.

同时，我做了一个新的最小项目，但结果相同，即，飞溅屏幕隐藏在Expo中，而不是在Android Build中。 我的包裹是我的包裹。

{
  "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
}

正如上面所述，我同时确定并解决了问题。我要做的就是安装以下软件包：

反应新的安全区域封闭式

反应新屏幕

反应本式tab-view

反射新闻视图（用于材料 - top-tab-navigator）

实际上，这在有关从React Navigation 5升级到React Navigation 6的说明中描述了这一点（请参阅

Https：//reaectnavigation.org/docs/upgrading-from-5.x/from-5.x/

）正确

您可以使用Expo的UseFonts，它为您提供带有ISReady属性的数组。

• const [interLoaded] = useFonts({
      Inter: require('@tamagui/font-inter/otf/Inter-Medium.otf'),
      InterBold: require('@tamagui/font-inter/otf/Inter-Bold.otf'),
  });
  
  useEffect(() => {
      if (interLoaded) {
        SplashScreen.hideAsync();
      }
  }, [interLoaded]);