Stack Navigation

스크린에서 스크린으로 이동하는 방법을 알아보자. 

 

Step 0. 공식 문서를 참고하여 설치

 

https://reactnavigation.org/docs/getting-started

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

 

 

Step 1. navigation 폴더와 screens 폴더 각각 생성

Step 2. screens 폴더 안에 스크린 2개 만들기

온보딩스크린에서 버튼을 누르면 로그인 스크린으로 넘어가는 것을 만들어보자. 

온보딩 화면에는 버튼을 추가해준다. 

function OnboardingScreen({navigation}) {
  return (
    <SafeAreaView>
      <View>
        <Button
          title="로그인 화면으로 이동하자~~"
        />
      </View>
    </SafeAreaView>
  );
}

 

Step 3. App.tsx 파일에 NavigationContainer 추가

function App(): React.JSX.Element {
  return (
    <NavigationContainer>
      <AuthStackNavigator />
    </NavigationContainer>
  );
}

 

 

 

Step 4. navigation 폴더 안에 StackNavigator 생성

 

로그인 및 인증 관련 한 스크린들끼리 사용할 것이므로 AuthStackNavigator 라 작명

 

1) createStackNavigator 로 생성

2) Stack.Navigator 로 감싸주고

3) 그 사이에 스크린들을 쌓아준다. 

name 은 화면 상단에 보여지는 텍스트이고 component 파라미터로 스크린명을 적어주면 된다. 

import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {StyleSheet, View} from 'react-native';
import OnboardingScreen from '../screens/OnboardingScreen';
import LoginScreen from '../screens/LoginScreen';

function AuthStackNavigator() {
  const Stack = createStackNavigator();
  return (
    <Stack.Navigator>
      <Stack.Screen name="Onboarding" component={OnboardingScreen} />
      <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
  );
}

const styles = StyleSheet.create({});

export default AuthStackNavigator;

 

Step 5. 버튼에 이동 기능 넣기

<Button
    title="로그인 화면으로 이동하자~~"
    onPress={() => navigation.navigate('Login')}
 />

 

온보딩 스크린의 버튼에 onPress 기능에 navigate 를 추가해주면 완성~!