使用 Stack.Screen (iOS/Android) 添加 React Navigation 后，React Native 应用卡在启动画面上答案

【问题标题】：React Native app is stuck on splash screen after adding React Navigation using Stack.Screen (iOS/Android)使用 Stack.Screen (iOS/Android) 添加 React Navigation 后，React Native 应用卡在启动画面上
【发布时间】：2023-01-20 21:13:00
【问题描述】：

就像问题所说的那样，我正在学习一个教程并且它工作正常所以我想将它实现到我自己的副项目应用程序中。添加后，与文档中所说的完全相同 <Stack.Screen/> 中的组件将不会加载。我尝试了多种方法，但似乎无济于事。也没有错误，所以我坚持如何调试。

由于我不知道我的代码的哪一部分导致了问题，我将在此处发布我的 github 存储库链接。

https://github.com/totablue/ToyBoxOfWords

【问题讨论】：

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

我试过运行你的代码，效果很好。问题是你没有添加一些依赖！这是我在您的代码中使用的 package.json 文件。

{ “依赖”：{ “博览会字体”：“〜10.2.0”， “博览会常量”：“〜13.2.4”， “世博会状态栏”：“~1.4.0”， "@expo/vector-icons": "^13.0.0", “世博会闪屏”：“~0.16.2”， “反应本机纸”：“4.9.2”， “反应原生屏幕”：“〜3.15.0”， "@react-navigation/native": "", “@react-navigation/native-stack”：“", “react-native-safe-area-context”：“4.3.1” } }

【讨论】：

我试过替换我的 package.json 中的依赖项但似乎没有用......我在想也许依赖版本与它有关但没有改变任何东西......
你可以试试：snack.expo.dev/@vudanmax/nghich
谢谢，我将比较两者，看看可能导致问题的原因。
我用你的零食运行它，它似乎工作正常。但是我尝试在我的手机上运行但它不起作用。我认为其他地方有错误。

【解决方案2】：

回答我自己的问题。导致我的应用程序卡在启动画面上的是 SplashScreen.preventAutoHideAsync() 在应用程序加载字体时调用。

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

这部分代码没有运行，所以启动画面永远不会消失。

使用此视频以不同的方式加载自定义字体并修复了所有问题。 https://youtu.be/viIkcDYSBrI

【讨论】：