리액트 네이티브 - 앱 페이지 적용 - 2 , 스택 네비게이터 활용

스택 네비게이터 활용

--> navigation폴더 생성 후 StackNavigator.js 파일 생성
--> 페이지 이동을 관장하는 스택네비게이터를 관리하기 위한 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 (

          //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
          //위에서 선언한 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>
      )
  }

// 만든 StackNavigator 함수를 밖에서 쓸 수 있도록 export default 선언으로 내보내주고 있음
  export default StackNavigator;
  
  

---

0) 스택네비게이터 공식 문서 링크

https://reactnavigation.org/docs/stack-navigator/

1) 사용 준비

import React from 'react';

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

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

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

2) 기본 틀

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

export default StackNavigator;

3) 스크린 옵션

        //컴포넌트들을 페이지처럼 여기게끔 해주는 기능을 하는 네비게이터 태그를 선언합니다.
        //위에서 선언한 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>
        
        

4) 페이지 연결

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

스택네비게이션을 적용하기 위한 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>);
  }