스택 네비게이션의 특정 화면에서 탭 네비게이션을 숨기는 방법

예시)

import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
const ProfileStack = createStackNavigator();

const ProfileNavigator = ({ navigation, route }) => {
  React.useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    if (routeName === "Group") {
      navigation.setOptions({ tabBarVisible: false });
    } else {
      navigation.setOptions({ tabBarVisible: true });
    }
  }, [navigation, route]);
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
      <ProfileStack.Screen name="Group" component={GroupScreen} />
    </ProfileStack.Navigator>
  );
};

출처 : https://stackoverflow.com/questions/51352081/react-navigation-how-to-hide-tabbar-from-inside-stack-navigation

React Navigation how to hide tabbar from inside stack navigation

 

+ 이유는 아직 모르겠지만 특정 스크린만 탭 내비게이션이 보이도록 하기 위해서 if (routeName !== "screen")을 쓰거나 if (routeName === "screen") navigation.setOptions({ tabBarVisible: true });와 같이 작성하면 처음 앱이 실행될 때 탭 내비게이션이 보이지 않는 문제가 있다. 그래서 탭 내비게이션을 숨기고 싶은 스크린들의 이름을 배열에 저장해서 if (extraScreens.includes(routeName))로 수정하니까 문제없이 잘 작동한다.