💬 React native navigation stack + bottom tab 같이 사용하기

처음 해보는 React-native! 기존에 react, vue등 웹 프레임워크와는 router 설정하는 방법이 다르다. 다음에 또 RN 프로젝트를 진행할 수도 있으니 정리해보는 react-navigation 이 방법이 정답이 아닐 수 있다.

stack navigation과 tab navigaion을 동시에 사용해야했는데, 앱의 구조가 로그인 전 / 로그인 후로 나뉘고 로그인 후에는 tab navigation을 사용한다. 또, tab navigation 안에서도 bottom tab이 보이지 않는 화면이 존재한다.

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

이렇게 설치했다. 5.x 버전을 사용했다.

stack navigation

뼈대부터 만들어보자

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import LoginView from './views/LoginView';
import RegisterView from './views/RegisterView';

const Stack = createStackNavigator();

const App = () => {
	<NavigationContainer>
		<Stack.Navigator initialRouteName="LoginView">
        		<Stack.Screen
                    		name="LoginView"
                    		component={LoginView}
                    		options={{headerShown: false}}
             		/>
                	<Stack.Screen
                    		name="RegisterView"
                    		component={RegisterView}
                    		options={{headerShown: false}}
             		/>
       		</Stack.Navigator>
	</NavigationContainer>
}

export default App;

실제 사용한 코드에서 간소화 시킨 모습이다.
Stack.Navigator로 Stack.Screen을 감싼다. initialRouteName은 기본으로 보여주고 싶은 화면을 설정할 때 사용한다.

LoginView에서 아이디가 없으면 RegisterView로 넘어가야한다.
RegisterView로 넘어가려면 버튼을 만들어 stack을 쌓아줘야한다.

const LoginView = ({ navigation }) => {
	return (
      		// view는 생략
    		<TouchableOpacity onPress={() => navigation.navigate('RegisterEmailView')}>
        		<Text>회원가입</Text>
        	</TouchableOpacity>
    	)
}

export const LoginView;

props로 navigation을 받아준 후, RegisterView로 이동하게 설정한다.

만약 아이디가 있는 상태인데 RegisterView를 잘못 눌러서 뒤로 가야한다면

const RegisterView = ({ navigation }) => {
	return (
      		// view는 생략 
    		<TouchableOpacity onPress={() => navigation.goBack()}>
      			<Text>뒤로가기</Text>
      		</TouchableOpacity>
    	)
}

export const RegisterView;

바로 전 화면으로 돌아가려면 이렇게 goBack() 으로 간단하게 처리할 수 있다.

tab naviagation

tab 네비게이션 안에서 stack 네비게이션을 사용해야한다
그리고 이동했을때 bottom tab이 안 보이게 설정!

import React, { useLayoutEffect } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const MainStack = ({ navigation, route}) => {
	useLayoutEffect(() => {
 	const routeName = getFocusedRouteNameFromRoute(route);
    	if (routeName === "FirstView") {
        	navigation.setOptions({ tabBarVisible: false });
        } else {
        	navigation.setOptions({ tabBarVisible: true });
        }
	});
	return (
		<Stack.Navigator initialRouteName="FirstView">
		<Stack.Screen
			name="FirstView"
			component="FirstView"
			options={{ headerShown: false }}
		/>
		<Stack.Screen
			name="SecondView"
			component="SecondView"
			options={{ headerShown: false }}
		/>
	)
}

const NavigationTabs = () => {
	return (
		<Tab.Navigator
			tabBarOptions={{
			showLabel: false,
			style: {
				position: 'absolute',
				backgroundColor: '#eeeeee',
				// 스타일 작성
				},
			}}
		>
		<Tab.Screen
			name="MainStack"
			component={MainStack}
			options={{
				tabBarIcon: ({ focused}) => (
					<View>
					{ focused ? /*포커스 아이콘*/ : /*디폴트 아이콘*/}
					</View>
				),
			}}
		/>
		<Tab.Screen
			name="SubStack"
			component={SubStack}
			options // 위와 같음 생략
		/>
        </Tab.Navigator>
	)
}

export default NavigationTabs;

스택 안에서 navigation name으로 tab bar을 보여줄지 보여주지 않을지 설정할 수 있다! 그리고 그 stack을 통째로 tab screen에 넣으면 된다.

처음엔 구조가 좀 헷갈렸는데 react native navigation의 구조를 이제 어느정도 잡을 수 있게 된 것 같다 〰️ 이렇게 로그인 전 stack navigationo과 로그인 후 tab navigation을 각각 만들어 로그인 전후 처리만 해주었다.

RN... 재밌다