[ReactNative] 스택내비게이션에서 탭 바 숨기기

문제상황

하단 탭바는 Tab 내비게이션을 이용했고
[작성한 리뷰] , [알림 설정] , [1:1 문의] 는 Stack 내비게이션으로 구현되어있다.

이화면에서 [작성한 리뷰]를 누르면

이화면이 뜬다.

하지만 스택 스크린이 화면 전체를 덮도록 구현하고 싶다!! (탭바 숨기기)

생각보다 자료가 없어서 엄청 검색하고 다닌 결과,
두가지 방법이 있다.

1. 탭->스택이 아니라 스택->탭으로 구현하기

https://reactnavigation.org/docs/hiding-tabbar-in-screens/
위의 공식문서에 자세하게 나와있다 -!
기본 내비게이션을 Stack으로 두고
처음 보여줄 Stack.screen 컴포넌트에만 Tab 내비게이션을 구현하는 방법.

--> 이미 내비게이션이 많이 얽혀있고 더 좋은 묘수가 있을것 같아서 사용해보진 않았다.

2.Screen options 속성 이용 (이 방법으로 구현)

v5 (구버전)

// MainNavigator.tsx
<Tab.Navigator screenOptions={screenOptions} initialRouteName="Main">
	<Tab.Screen name="MyNavigator" component={MyNavigator} options={{tabBarVisible: false}} />
    <Tab.Screen ... />
      />

이렇게 Tab.Screen에서 options속성의 tabBarVisible 프로퍼티가 있었다!
이를 true/false로 조절하면 된다고 한다.
하지만 스택오버플로우 참고하여보니 현재 업데이트된 v6버전에선 없어진 프로퍼티다 !!!
또한 이렇게 사용하면 그 탭 전체에서 사라진다 .. . !

✅ v6 (NEW!) ✅

전체 탭내비게이터에서가 아니라
탭을 사라지게할 화면을 스택으로 갖고있는 스택내비게이터 컴포넌트에서 구현한다.

// MyNavigator.tsx
    <Stack.Navigator
      initialRouteName="MyPage"
      screenOptions={{headerShown: false, gestureEnabled: true}}
    >
      <Stack.Screen ... />
      <Stack.Screen .../>
      <Stack.Screen name="MyPoint" component={MyPoint} options={{tabBarStyle: {display: 'none'}}}/>
      <Stack.Screen ... />
      ...

tabBarStyle 이라는 프로퍼티를 사용하고 값으로는 {display: 'none'} 혹은 {display: undefined} 등을 준다.
undefined로 하면 다른 설정없는 기본값이다. 즉, 탭바가 사라지지 않는다.

따라서,

탭바를 사라지게 할 화면에서는 {display: 'none'} 값을 주면 된다!

코드

현재 구현한 코드에선,
[마이페이지] 탭을 눌렀을 때 처음 보여지는 MyPage 컴포넌트에선 탭바가 사라지면 안된다.
하지만 이 화면 속 활성화 되어있는 부분을 누르면 스택 내비게이션을 통해 다른 화면이 올라와야 하기 때문에 조건을 두어 options 속성을 설정했다.

getFocusedRouteNameFromRoute

화면에 보여주는 화면의 name값을 받아올 수 있다.

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';

...
export const MyNavigator = ({navigation, route}) => {
  React.useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    if (routeName !== 'MyPage') { //MyPage이외의 화면에 대해 tabBar none을 설정한다.
      navigation.setOptions({tabBarStyle: {display: 'none'}});
    } else {
      navigation.setOptions({tabBarStyle: {display: undefined}});
    }
  }, [navigation, route]);
  return (
    <Stack.Navigator
      initialRouteName="MyPage"
      screenOptions={{headerShown: false, gestureEnabled: true}}
    >
      <Stack.Screen name="MyPage" component={MyPage} />
      <Stack.Screen name="MyEditUserInfo" component={MyEditUserInfo} />
      <Stack.Screen name="MyPoint" component={MyPoint} />
      <Stack.Screen name="MyReview" component={MyReview} />
      <Stack.Screen name="MyNotifications" component={MyNotifications} />
      <Stack.Screen name="MyInquiry" component={MyInquiry} />
    </Stack.Navigator>
  );
};