3주차 앱개발_05

앱 상태바(Status Bar) 관리

✨ Expo SDK

• Expo에서 제공해주는 앱 기능 도구들을 개발할 때 여기서 확인하기!
• 링크: https://docs.expo.dev/versions/latest/

1. 엑스포 도구 설치하기

• 터미널에서 설치하기
  expo install expo-status-bar
  

2. import해주고 사용하기

import { StatusBar } from 'expo-status-bar';
...
<StatusBar style="black" />

네비게이터란?

웹 사이트처럼 지금까지 만든 컴포넌트들을 페이지화 시키고, 페이지간 이동을 가능하게 해주는 라이브러리(도구를 모아놓은)입니다!!

리액트 네이티브에서 페이지 네비게이션을 구현하기 위해서는 사전 준비가 조금 까다롭게 느껴질 수 있습니다.

가장 먼저 수많은 기능들을 사용할 때 최소한으로 필요한 부분을 다운로드하도록 하겠습니다.

다음 코드를 터미널에 붙여넣기 해서 다운로드 받기

yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context react-native-gesture-handler

이렇게 가장 기본적인 도구들을 다운로드 받았습니다😝

스텍 네비게이션 사용하기

스텍네비게이션이란?

간단히 말하자면 페이지에서 페이지로 이동하는 기능입니다.
그렇다면 왜 '스택'일까??

앱은 페이지가 쌓이는 구조라고 한다.!!
메인 페이지에 방문했다가 로그인 페이지를 방문하고 뒤로가기를 누르면 입었던 겉옷을 벗는 것과 같다!!

각 페이지는 Stack.Screen 이라 부르며,
페이지들이 모인 책이 완성되고, 여기서 책갈피를 Stack.Navigator라 부릅니다!

스택 네비게이션을 사용하기 위해 도구 설치하기

터미널에 yarn add @react-navigation/stack 붙여넣기

네비게이션 파일들을 보관할 폴더 생성하기

아래 사진처럼 navigation 폴더를 생성해줍니다.

navigation 폴더 아래 StackNavigator.js 파일 생성하기

이 파일에 페이지를 이동시키는 기술들을 담게 됩니다.

StackNavigator.js 코드 살펴보기

상단의 네비게이터 정의, 사용 준비하기

//설치한 스택 네비게이션 라이브러리를 가져옵니다
import React from 'react';
//설치한 스택 네비게이션 라이브러리를 가져옵니다
import { createStackNavigator } from '@react-navigation/stack';

//페이지로 만든 컴포넌트들을 불러옵니다
import DetailPage from '../pages/DetailPage';
import MainPage from '../pages/MainPage';

//스택 네비게이션 라이브러리가 제공해주는 여러 기능이 담겨있는 객체를 사용합니다
//그래서 이렇게 항상 상단에 선언하고 시작하는게 규칙입니다!
const Stack = createStackNavigator();

기본 틀

//리액트의 모~든 파일은 컴포넌트라 생각하고
//페이지 기능을 해주는 모든 기능이 담겨 있는 컴포넌트를 만든다 생각하세요!
const StackNavigator = () =>{
    return (
				/// 페이지 기능이 들어갈 곳
    )
}

export default StackNavigator;

페이지 기능이 들어갈 곳

//컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 const Stack = createStackNavigator(); Stack 변수에 들어있는 태그를 꺼내 사용합니다.
        //Stack.Navigator 태그 내부엔 페이지(화면)를 스타일링 할 수 있는 다양한 옵션들이 담겨 있습니다.
        <Stack.Navigator
            screenOptions={{
                headerStyle: {
                    backgroundColor: "black",
                    borderBottomColor: "black",
                    shadowColor: "black",
                    height:100
                },
                //글자색
                headerTintColor: "#FFFFFF",
                headerBackTitleVisible: false
            }}
            
        >

            {/* 컴포넌트를 페이지로 만들어주는 엘리먼트(태그)에 끼워 넣습니다. 이 자체로 이제 페이지 기능을 합니다*/}
            <Stack.Screen name="MainPage" component={MainPage}/>
            <Stack.Screen name="DetailPage" component={DetailPage}/>
        </Stack.Navigator>

app.js에 네비게이션 기능 달기

• 컴포넌트를 페이지화 한 후 최상단 컴포넌트 즉 app.js에 네비게이션 기능을 달아야 한다.

import React from 'react';
//이제 모든 페이지 컴포넌트들이 끼워져있는 책갈피를 메인에 둘예정이므로
//컴포넌트를 더이상 불러오지 않아도 됩니다.
// import MainPage from './pages/MainPage';
// import DetailPage from './pages/DetailPage';
import { StatusBar } from 'expo-status-bar';

//메인에 세팅할 네비게이션 도구들을 가져옵니다.
//스택 네비게이션 설치 전 깔아놓은 기초적인 도구들 중 하나를 꺼낸 것입니다.
import {NavigationContainer} from '@react-navigation/native';
import StackNavigator from './navigation/StackNavigator'

export default function App() {

  console.disableYellowBox = true;

  return ( 
  <NavigationContainer>
    <StatusBar style="black" />
    <StackNavigator/>
 </NavigationContainer>);
}