[전기차 충전소 찾기 앱/ReactNative] 스플래쉬 스크린

bg-logo.png

0.08MB

logo.png

0.01MB

 

assets -> fonts -> images 에 이미지 저장 

---

 

새 폴더 생성

App -> Screen 

 

및 파일 생성

LoginScreen.jsx

 

rnf 입력 후 엔터하면 자동생선

import { Text, View } from 'react-native'

import React, { Component } from 'react'

export default class LoginScreen extends Component {

  render() {

    return (

      <View>

        <Text>LoginScreen</Text>

      </View>

    )

  }

}

 

 

 

※ Splash 이미지란?

앱을 실행하였을 때 앱 로딩되는 사이 사용자에게 보여지는 이미지를 말한다. 보통 앱이 로딩 중일 때 사용된다. Expo 라이브러리에서 Splash 이미지를 제어할 수 있는 라이브러리가 존재한다.

 

 

 

App.js에서 테스트로 작성한 폰트 text 컴포넌트르 삭제하고 LoginScreen 컴포넌트 적용

import { StatusBar } from "expo-status-bar";

import { StyleSheet, Text, View } from "react-native";

import { useFonts } from "expo-font";

import { useCallback } from "react";

import * as SplashScreen from "expo-splash-screen";

import LoginScreen from "./App/Screen/LoginScreen";

SplashScreen.preventAutoHideAsync();

export default function App() {

  const [fontsLoaded] = useFonts({

    "Pretend-Regular": require("./assets/fonts/Pretendard-Regular.otf"),

    "Pretend-Medium": require("./assets/fonts/Pretendard-Medium.otf"),

    "Pretend-Bold": require("./assets/fonts/Pretendard-Bold.otf"),

  });

  const onLayoutRootView = useCallback(async () => {

    if (fontsLoaded || fontError) {

      await SplashScreen.hideAsync();

    }

  }, [fontsLoaded]);

  if (!fontsLoaded) {

    return null;

  }

  return (

    <View style={styles.container} onLayout={onLayoutRootView}>

      <LoginScreen />

      <StatusBar style="auto" />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: "#fff",

    alignItems: "center",

    justifyContent: "center",

  },

});

 

 

 

 

import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";

import React from "react";

export default function LoginScreen() {

  return (

    <View

      style={{

        width: "100%",

        display: "flex",

        justifyContent: "center",

        alignItems: "center",

        marginTop: 50,

      }}

    >

      <Image

        source={require("./../../assets/images/logo.png")}

        style={styles.logoImage}

      />

      <Image

        source={require("./../../assets/images/bg-logo.png")}

        style={styles.bgImage}

      />

      <View style={{ padding: 20 }}>

        <Text style={styles.heading}>EV 충전소를 찾는 APP</Text>

        <Text style={styles.desc}>

          여러분 근처의 충전소를 빠르게 찾을 수 있습니다.

        </Text>

      </View>

      <TouchableOpacity

        style={styles.button}

        onPress={() => console.log("버튼 클릭!")}

      >

        <Text style={{ color: "white", textAlign: "center" }}>

          Login With Google

        </Text>

      </TouchableOpacity>

    </View>

  );

}

const styles = StyleSheet.create({

  logoImage: {

    width: "70%",

    height: 60,

    objectFit: "contain",

  },

  bgImage: {

    width: "100%",

    height: 250,

    marginTop: 20,

    objectFit: "cover",

  },

  heading: {

    fontSize: 25,

    fontFamily: "Pretend-Bold",

    textAlign: "center",

    marginTop: 20,

  },

  desc: {

    fontSize: 17,

    fontFamily: "Pretend-Medium",

    marginTop: 15,

    textAlign: "center",

    color: "#000",

  },

  button: {

    backgroundColor: "#4ECB71",

    padding: 16,

    display: "flex",

    borderRadius: 99,

    marginTop: 100,

  },

});

 

버튼은 클릭이 가능하도록

 

https://reactnative.dev/docs/touchableopacity

TouchableOpacity · React Native

을 적용했다. 

 

 

onPress 이벤트로 Login with google 버튼을 클릭하면 콘솔에 버튼클릭이 출력된다.