[ React Native Expo ] Stack Navigation

버튼을 누르면 페이지 이동을 하기 위해 naviagation을 사용

 

---

Setup

natvigation을 사용하기 위해 react-navigation과 stack 사용

npm install @react-navigation/native
npm install @react-navigation/stack

 

---

Useage

app.tsx 파일에서 네비게이션을 설정

 

NavigationContiner르 페이지를 이동할 영역을 잡아주며

Stack.Navigator를 사용하여 어느 페이지로 이동할것인지 경로를 잡아준다.

 

Stat.Navigator initalRouteName="Home"으로 설정하여 초기 화면은 Home으로 나오도록 하며,

Home에서 버튼을 누르면 QR 스캔을 하는 컴포넌트로 이동하도록 구현

 

처음에 Stack.Navigator를 사용하면 헤더에 현재 페이지와 뒤로가기 화살표가 나오게 되는데

screenOptions로 headerShown: false로 하면 이를 숨길 수 있다.

import Home from "./page/home";
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import QRscanner from "./page/qr_scanner";

export default function App() {

  const Stack = createStackNavigator()

  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home" screenOptions={{headerShown: false}}>
          <Stack.Screen name="Home" component={Home}/>
          <Stack.Screen name="QRscanner" component={QRscanner}/>
        </Stack.Navigator>
      </NavigationContainer>
  )
}

 

Home화면에서 navigation을 prop으로 전달 받아서 navigation을 사용

navigation.navigate(이동할 페이지 경로) 가 실행이 되면 해당 페이지로 화면이 이동된다.

export default function Home({navigation}) {

    function handleNavigatorQRcode() {
        navigation.navigate('QRscanner')
    }

    return(
        <ScreenInner>
            <TouchableOpacity style={styles.button} onPress={handleNavigatorQRcode}>
                <Scan width={120} height={40} fill={"black"}/>
                <Text style={styles.text}>QR CODE</Text>
            </TouchableOpacity>
        </ScreenInner>
    )
}

 

Stack Navigator란?

• 화면이 스택(stack) 형태로 쌓이고 제거되는 방식으로 작동하는 네비게이션 방식
• 앱 화면의 탐색 경로를 관리하며, 이전 화면으로 돌아갈 수 있는 뒤로가기(back) 동작을 지원
• **"현재 화면 위에 새로운 화면을 쌓는다"**는 개념을 사용

 

그럼 Home에서 QR 버튼을 누르면 QR scan이 가능한 페이지로 이동이 된다.