React Native Splash Screen (스플래쉬 화면)

스플래쉬(Splash) 화면이란 ? 앱이 구동을 시작할때 켜지기 전 나오는 화면을 말한다.  어플리케이션에서 실행에 필요한 데이터를 불러오는데 이용되며, 브랜드 명칭을 알려주는데도 사용된다. 

import Splash from "./src/Splash";
 
 
 
export default class App extends Component {
 
 
  render() {
    return (
      <Splash />
    );
  }
}

[App.js]

Splash.js 파일을 생성하고 render 함수에 return 값으로 호출한다.

render() {
    return (
      <View style ={styles.container}>
        <Text style={styles.title}> Hello World !!!! </Text>
        <Text style={styles.subtitle}> Powered by React Native </Text>
      </View>  
      
    );
  }
 

View컴포넌트 내부에 Text 컴포넌트 두개를 배치했을때의 화면구성이다.

 <View style ={styles.container}>
        <View style={style.titleContainer}>
            <Text style={styles.title}> Hello World !!!! </Text>
        </View>
        <View>
            <Text style={styles.subtitle}> Powered by React Native </Text>
        </View>
      </View>

Text 컴포넌트를 View 컴포넌트로 각각 감싸고 titleContainer영역을 따로 지정한뒤 , backGroundColor 속성을 다르게 지정하여 레이아웃구성을 잡아준다.

import React, { Component } from 'react';
import { View, Text , StyleSheet } from 'react-native';
 
export default class Splash extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
 
  render() {
    return (
      <View style ={styles.container}>
        <View style={styles.titleContainer}>
            <Text style={styles.title}> Hello World !!!! </Text>
        </View>
        <View>
            <Text style={styles.subtitle}> Powered by React Native </Text>
        </View>
      </View>
    );
  }
}
 
 
 
const styles = StyleSheet.create({
    
    container: { 
        // backgroundColor: 'red', 
        backgroundColor : '#3498db',
        flex: 1, 
        justifyContent: "center", 
        alignItems: "center"  
    },
    title : {
        color : 'white',
        fontSize: 35,
        fontWeight: 'bold'
    },
    subtitle : {
        color : 'white',
        fontWeight: '200'
    }, titleContainer : {
        justifyContent : 'center',
        flex : 1
    }
});

[Splash.js]

완성된 Splash 화면인데, 해당화면을 좀 수정해서 Weather App 스플래쉬화면으로 변경할 예정이다. 

백그라운드컬러피커 참고 

원문 React Native Tutorial #1 - Making a splash screen 

스플래쉬화면이란?