javascript - React Native & Expo，如何控制闪屏？

Question

我正在使用您在 app.json 中添加的 expo 中的内置启动画面对于一个简单的测试应用程序。但是我注意到我的开始屏幕在显示我使用 AsyncStorage 添加的 Assets 之前 1 毫秒以默认模式闪烁。 .
我试过使用 splash-screen来自世博会的包裹
但我发现它有点困惑。有没有一种相当简单的方法可以添加到我的App.js 中？这个逻辑:

Show a splash screen and when all assets are loaded, load this setup (with my contexts and screens), or just increase loading time of the build in splash screen from expo (because I assume it loads over the assets being fetched?).

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  useEffect(()=> {
    changeTheme()
  },[])


  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" component={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};

Answer 1

第一个解决方案:
您可以使用 SplashScreen来自世博会的模块。以下是如何使用它的概述:

expo install expo-splash-screen

import * as SplashScreen from "expo-splash-screen";
import React, { useCallback, useEffect, useState } from "react";
import { Text, View } from "react-native";

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

  useEffect(() => {
    async function prepare() {
      // Keep the splash screen visible
      await SplashScreen.preventAutoHideAsync();
      // Do what you need before the splash screen gets hidden
      console.log("I'm a task that gets executed before splash screen disappears");
      // Then tell the application to render
      setAppIsReady(true);
    }
    prepare();
  }, []);

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

  if (!appIsReady) {
    return null;
  }

  return (
    <View onLayout={onLayoutRootView} style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Hello Word!</Text> </View>
  );
}

第二种解决方案:
还有 AppLoading来自 Expo 的组件，但它似乎已被弃用。但它是有效的，这里是您如何使用它的概述:

 expo install expo-app-loading

import AppLoading from "expo-app-loading";
import {View, Text} from "react-native"


export default function App() {
 const [isChecking, setIsChecking] = useState(true);

 const  asyncDoThings = async ()=>{
    // You do here all the fetching and checking process
 }

 if (isChecking) {
    return (
      <AppLoading
        startAsync={() => asyncDoThings()}
        onFinish={() => setIsChecking(false)}
        onError={console.warn}
      />
    );
  }

  return <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}><Text>Hello Word!</Text></View>
  
}

附加解决方案:
以下部分是回答上述问题的特殊用例:

import AppLoading from "expo-app-loading";
import {View} from "react-native"

const App = () => {

  const [selectedTheme, setSelectedTheme] = useState(themes.light)
  const [isChecking, setIsChecking] = useState(true);

  const changeTheme = async () =>{
    try {
      const theme = await AsyncStorage.getItem("MyTheme")
      if (theme === "dark"){
      setSelectedTheme(themes.nightSky)} 
      else if (theme === "light") {
        setSelectedTheme(themes.arctic)
        }
    } catch (err) {alert(err)}
  }
  
  if (isChecking) {
    return (
      <AppLoading
        startAsync={() =>   changeTheme()}
        onFinish={() => setIsChecking(false)}
        onError={console.warn}
      />
    );
  }
  
  return (
    <ThemeContext.Provider value={{selectedTheme, changeTheme}}>
         <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown:false, presentation: 'modal'}}>
              <Stack.Screen name="Home" component={home}/>
            </Stack.Navigator>
          </NavigationContainer>
    </ThemeContext.Provider>

  );
};