react native navigation v5 custom tabbar ?

React React Native
1

안녕하세요.

신규 프로젝트를 진행중인데요. 리엑티브 네이티브 네비게이션 v5 를 선택해서 진행중입니다.
해당 네비게이션에 BottomTabNavigator 를 사용중인데요.
해당 네비게이션의 탭 내용중 하나를 Hidden 처리 하고 싶은데요. (이를테면 홈화면)

이 관련 정보가 해당 공식 문서를 참고해도 나와있지 않은듯해서요.
이런 관련 문제로 v4 -> v5 업그레이드 하시는 분들도 해당 문제에 비슷하게 경험이 있으실듯한데요.

혹시 참고할만한 내용이나 링크 혹은 워딩을 알려주시면
찾아보도록 하겠습니다.

커스텀탭뷰라는 키워드로 좀 살펴보긴 했는데요.
예전 버젼들이 검색되기도 하고 도움 되는 내용이 별로 없네요.

아직 새로나온 기능인데다가 리뷰나 사용성 부분에 있어서 아직 테스트 해야할 부분이 많아보이네요 .

감사합니다.

2

전 버전 같이 NavigationOptions 이용해서 header: null 써도 되나요? V5쓰다가 리소스가 없어서 던지고 react-navigation-tabs쓰고 있습니다

3

header 를 없애는 옵션은 있는듯해요. 그리고 특정 탭에서 아래 내비 탭을 없애는 것도 가능하기는 한데, 아예 특정 1개 탭 내용만을 없애는 기능은 없어보여서요 ㅠ 확실히 리소스가 너무 없네요.

4

이 말이 정확히 어떤 의미인가요? 탭이 4개에서 3개로 줄이고 싶가는 얘기인가요? 아니면 그 탭 아이콘 자리는 차지하고 있지만 아이콘과 타이틀만 안보이게(투명)하게 만들고 싶다는 얘긴가요?

무엇보다 어떤 목적에서 이러한 기능이 필요한건지도 궁금합니다. ^^

5

탭을 5개 에서 4개로 줄이고 싶다는건데요. 정확하게 자리도 차지 하지 않아도 되고 navigate로 이동가능하게 하고 싶어서요. 이를 테면 줄이고 싶은 텝이 홈 버튼인데, 해당 홈버튼을 누르면 탭이 유지된 채로 새로운 화면으로 가되 아래 탭에는 홈 항목은 없었으면 해서요.

6

제가 사용한 방법입니다.

const Tab = createBottomTabNavigator();
const TabNavigator = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen 
        name={'tab1'} 
        component={YourComponent} 
        options={{
          tabBarButton: (props: any) =>
            visible ? (
              <TouchableHighlight underlayColor={color.primary_lightest} {...props} />
            ) : (
              <View />
            ),
        }} />
    </Tab.Navigator>
  );
}

visible의 경우 외부에서 받아온 변수로서 원하시는 조건 값을 넣어주시면 될듯합니다.
이런식으로 사용하게 되면 visible(boolean)의 여부에 따라 자리를 차지하지 않고 없어지게 되며

저 같은 경우는 MobX의 store와 연동해 다음과 같이 사용했습니다.

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { MobXProviderContext } from 'mobx-react';
import { observer } from 'mobx-react';

const Tab = createBottomTabNavigator();

function useStores() {
  return React.useContext(MobXProviderContext);
}

const TabNavigator = observer(() => {
  const { userStore } = useStores();
  console.log(userStore);
  return (
    <Tab.Navigator tabBarOptions={getNavOptions(insets)}>
      <Tab.Screen
        name={'tabHome'}
        component={Stack.HomeNavigator}
        options={{
          tabBarButton: (props: any) =>
            userStore.showBottomTab ? (
              <TouchableHighlight underlayColor={color.primary_lightest} {...props} />
            ) : (
              <View />
            ),
        }}
      />
      <Tab.Screen
        name={'tabCommute'}
        component={Stack.CommuteNavigator}
      />
      <Tab.Screen
        name={'tabOT'}
        component={Stack.OverworkNavigator}
      />
    </Tab.Navigator>
  );
});

Home 화면에 MobX로 userStore의 showBottomTab에 따라서 BottomTab 버튼이 보여지는 여부가 결정됩니다.

외부에서 userStore에 접근해 값을 설정해주면 해당 값에 따라서 바뀌게 됩니다.