如何将“expo-splash-screen”与“expo-google-fonts”一起使用？

Question

初始屏幕使用异步操作等待，而字体包使用“自定义挂钩” useFonts（我猜）。如何让启动屏幕等待谷歌字体加载？

Answer 1

您可以使用loadAsyncfrom加载字体expo-fonts，并使用管理启动屏幕expo-splash-screen

import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import { Inter_900Black } from '@expo-google-fonts/inter';

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

  useEffect(() => {
    (async () => {
      try {
        await SplashScreen.preventAutoHideAsync();
        await Font.loadAsync({ Inter_900Black });
      }
      catch {
        // handle error
      }
      finally {
        setAppIsReady(true);
      }
    })();
  }, []);

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

  if (!appIsReady) {
    return null;
  }

  return (
      <View style={styles.container} onLayout={onLayout}>
        <Text style={{fontFamily: 'Inter_900Black'}}>
          Example text
        </Text>
      </View>
  );
}