Expo 应用程序 - 安装后构建的 .apk 文件应用程序卡在启动屏幕上

Question

用 Expo 编写的申请。当应用程序在开发者模式或生产模式下本地运行时，一切都可以在设备模拟器上正常运行。但是，当应用程序构建为 .apk 并安装在模拟器或真实设备上时，应用程序会卡在启动屏幕上。

package.json

"dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "@react-native-community/datetimepicker": "7.2.0",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "expo": "~49.0.8",
    "expo-asset": "~8.10.1",
    "expo-constants": "~14.4.2",
    "expo-document-picker": "~11.5.4",
    "expo-file-system": "~15.4.4",
    "expo-image-picker": "~14.3.2",
    "expo-splash-screen": "~0.20.5",
    "expo-sqlite": "~11.3.3",
    "expo-status-bar": "~1.6.0",
    "expo-system-ui": "~2.4.0",
    "expo-sharing": "~11.5.0",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-calendar-picker": "^7.1.4",
    "react-native-gesture-handler": "~2.12.0",
    "react-native-popup-menu": "^0.16.1",
    "react-native-reanimated": "~3.3.0",
    "react-native-screens": "^3.27.0",
    "react-native-select-dropdown": "^3.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0"
  }

eas.js

{
  "cli": {
    "version": ">= 5.7.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal"
    },
    "preview": {
      "android": {
        "buildType": "apk"
      },
      "distribution": "internal"
    },
    "preview2": {
      "android": {
        "gradleCommand": ":app:assembleRelease"
      }
    },
    "preview3": {
      "developmentClient": true
    },
    "production": {}
  },
  "submit": {
    "production": {}
  }
}

我没有发现任何问题。我尝试删除expo-splash-screen，但这对我没有帮助。应用程序卡在白屏。

Answer 1

SplashScreen.preventAutoHideAsync();
export default function App() {

    const [appIsReady, setAppIsReady] = useState(false);

    useEffect(() => {
        async function prepare() {
            try {
                await Promise.all([init(), initShopping()]);
            } 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 style={styles.container} onLayout={onLayoutRootView}>
            <StatusBar style="auto"/>
            <NavigationContainer>
                <MainNavigation/>
            </NavigationContainer>
        </View>
    );
}