SplashScreen 알아보기

React Native에서 Expo를 사용할 때 Expo에서 제공하는 SplashScreen 컴포넌트를 사용하여 매력적이고 흥미로운 앱의 스플래시 화면을 만들 수 있습니다.

SplashScreen 컴포넌트를 사용하려면 expo-splash-screen 라이브러리에서 컴포넌트를 임포트하고 preventAutoHide 함수를 호출하여 일정 시간이 지나면 스플래시 화면이 사라지게끔 기본 동작을 변경할 수 있습니다. 다음은 예제입니다

import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import { SplashScreen } from 'expo-splash-screen';

export default function App() {
  useEffect(() => {
    SplashScreen.preventAutoHide();
  }, []);

  return (
    <View style={styles.container}>
      {/* Your app content */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

새로 나온 expo-router 라이브러리에서도 다음과 같이 SplashScreen 컴포넌트를 제공합니다.

import FontAwesome from '@expo/vector-icons/FontAwesome';
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { useFonts } from 'expo-font';
import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';

export {
  // Catch any errors thrown by the Layout component.
  ErrorBoundary,
} from 'expo-router';

export const unstable_settings = {
  // Ensure that reloading on `/modal` keeps a back button present.
  initialRouteName: '(tabs)',
};

export default function RootLayout() {
  const [loaded, error] = useFonts({
    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
    ...FontAwesome.font,
  });

  // Expo Router uses Error Boundaries to catch errors in the navigation tree.
  useEffect(() => {
    if (error) throw error;
  }, [error]);

  return (
    <>
      {/* Keep the splash screen open until the assets have loaded. In the future, we should just support async font loading with a native version of font-display. */}
      {!loaded && <SplashScreen />}
      {loaded && <RootLayoutNav />}
    </>
  );
}
...

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0