[React Native] Stack과 Tab Navigation 동시에 사용하기

접근방법 1. 각각의 Tab위에 Stack들 얹기

 

 

 

 

장점: 직관적임

단점: 스택 파일 갯수가 많아진다.

 

1. header(title)를 위해 Stack을 만들어야 했다.

Tab.Screen의 component props를 Stack이 아닌 Screen에 대해서는 Header가 생성되지 않는다.

그래서 단 한개의 Screen을 쓰더라도 Stack을 만들어주어야 했다.

 

 2. 여러 탭들에서 공통으로 사용하는 하나의 Screen이 존재했는데, 이 Screen을 접근하기위해 Stack마다이 Screen을 넣어줬다. 

아니, 사실 이 단 하나의 Screen을 접근하기 위해 여러 개의 Stack을 만들었다...

 

 

좋지않은 코드라는 것을 직감했고 (실제로 동작에 오류는 없었다) 다른 방식을 찾기 시작했다.

 

접근방법 2. Stack위에 Tab, 그리고 접근할 Screen

 

출처: github.com/react-navigation/react-navigation/issues/741

how to set header for TabNavigator? · Issue #741 · react-navigation/react-navigation

이곳에서 나와 같은 고민을 한 사람을 발견했고, 해결책을 제시해준 답변 중 괜찮은 방법을 발견했다.

 

react-navigation 버전이 5이상이라면  이 방법을 사용하는 것이다.

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Settings" component={SettingsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

이렇게 구현할 시, 고려해야할 점이 Tab 변경시, Header의 이름이 Home으로 고정되기 때문에 따로 설정해주어야한다.