Tab과 Stack 간 동적으로 Navigation Header를 변경 질문

안녕하세요… 구현을 해보다 도저히 안되는 것 같아… 질문 올려봅니다.

React Navigation을 사용 중인데요

Sack Navigator 에서 Tab Navigator를 연결한 상태입니다. 그래서 Tab 이동하면서 Stack Navigator에 등록한 화면을 들어가면 (하단의)Tab은 없어지고 새창으로 화면이 나옵니다. (새창 화면에는 Header에 Back 버튼이 있습니다.)

IOS를 고려하다보니 Depth를 2단계 이상 들어가는 경우 Back 버튼이 필요 하고요

구성을 아래와 같이 해봤습니다.

Stack -> Tab -> Stack (바둑판)

이렇게 기존 구성에 Tab에서 Stack Navagator를 등록해서 하나의 Tab화면에 바둑판식(Grid 화면)으로 화면을 구성했습니다. 바둑판 버튼은 Stack으로 구성이 되는 것이죠
안드로이드는 Back 버튼이 있어서 문제가 없습니다.
다만 IOS에서는 Header가 필요한데 위와 같은 Stack -> Tab -> Stack (바둑판) 구조에서는 Header를
// header: null,
로 하면 Header
Header
이런 식으로 구조가 만들어 집니다. (하단의)Tab은 그대로 두고 상단의 Header만 변경을 시키고 싶은데
방법이 없을까요?? Tab이 전환될 때 Header를 변경하는 것은 알고 있습니다.

Tab이 전환이 안되어도 Header를 변경할 수 있는 방법을 알고 싶습니다.

https://hackernoon.com/how-to-use-a-custom-header-and-custom-bottom-tab-bar-for-react-native-with-react-navigation-969a5d3cabb1

이 예제를 보니… 안되는 것 같네요… Tab이 없어지네요

기본적으로 Stack -> Tab 에 또 Stack 을 쓰신게 좀 이상한데요, (안티패턴으로 보입니다만)
꼭 그렇게 처리하셔야 하나요?

관련주제는

여기에 몇가지 케이스가 있는데, 혹시 살펴보셨었나요?

네… 보긴했는데

Another option here would be to add another stack navigator as a parent of the tab navigator, and put the details screen there. This is recommended.

const FeedStack = createStackNavigator({
  FeedHome: FeedScreen,
  /* any other route you want to render under the tab bar */
  /* 이 부분에서 Tab은 살아 있지만  디테일 화면으로 가면 뒤로가기 버튼 이없어서 IOS에서는 뒤로 갈 수가 없습니다. */ 
});

const TabNavigator = createBottomTabNavigator({
  Feed: FeedStack,
  Profile: ProfileScreen,
});

const HomeStack = createStackNavigator({
  Tabs: TabNavigator,
  Details: DetailsScreen,
  /* any other route you want to render above the tab bar */
  /* 이런 식으로 구현하면 새창 뜨기가 되어서 Tab을 가려버립니다. */
});

const AppNavigator = createSwitchNavigator({
  Auth: AuthScreen,
  Home: HomeStack,
});

이런 형태인데 헤더가 동적으로 변하길 원합니다…
가능할까요…??

코드 감사합니다.
흐… Stack - Tab - Stack 구조를 쓰시는 이유가 이해가 잘 안되어요…
일반적인 Stack - Tab 구조 안에서 하시려는 것을 하시던지,
페이지 이동시에도 탭이 살아있길 원하시면 Tab - Stack 으로 하시는게 맞을텐데요.

하나의 탭안에 여러개의 서브 메뉴가 있어서요

즉 탭이 Global Navigation 이라면 (GNB)
탭 안에 Local Navigation으로 서브 메뉴가 있는 것이지요 (LNB)

그리고 Local Navigation 에서 각각의 서브 메뉴를 들어가면(go screen) List가 나오고 Detail 화면이 있게 됩니다.

다만 Local Navigation에서 List가 나올 때 Tab을 살리면서 나오고 싶어요 안그러면 뒤로가기 한 다음에 탭을 전환해야 하니 버튼 누르는 로직이 탭 전환시에 한번 더 늘어나는게 불편하게보여서요

문제는 IOS는 뒤로가기 버튼이 기본으로 없어서 헤더 부분에 뒤로가기 버튼을 넣어야 하는데

Stack -Tab -Stack 구조에서는 Tab에서 헤더를 정해 놓으면 그 다음 Stack에서 헤더 내용이 변경이 안되더라구요…

참고로 탭과 헤더가 고정되고 본문만 바뀌면 뒤로가기 버튼이 없고 뒤로가기 버튼을 나오게 하면 새창 보기처럼 되어서 탭을 가려버립니다…

아 하나 궁금한게 Tab-Stack 구조로 하니까 헤더 자체가 없던데
custom header를 만들 수있나요??

말씀하신것처럼 할때 Tab-Stack 구조로 하는건데요.
헤더 나올텐데요. null 을 주신거 아닐까요?

아 헤더에 null을 주지는 않았습니다. 그러고보니 앞에 Switch Navigator가 있네요
Switch - Tab - Stack 으로 하면 헤더가 없는 Tab 화면이 나오는 건 맞는 것 같아요

그럼 이때 Custom Header를 만들면 제가 원하는 대로 되지않을가 싶네요

즉, Switch - Tab + Custom Header - Stack
이런 구조로 해보려고 합니다.

일단 테스트 코드로 헤더가 안나온게 맞는지 간단히 테스트하고 넘어가야겠네요
(테스트 한번 하고 다시 차분히 코드를 보니 헤더: null 이 맞았네요 ㅜㅜ)
어쨌든 커스텀 영역을 잡는 것도 고려하는 것도 나쁘진 않은 것 같네요 ㅠ

아무래도 이상해서 해봤는데요.
Tab(createBottomTabNavigator) - Stack 으로 했는데, 헤더가 잘 나옵니다.
각각에 Tab 에 createStackNavigator 을 넣어준거죠.

어떻게 하신건지 모르겠네요. 흠…

저도 혹시나 해서 다시 차분히 해봤는데…
둘다 됩니다.
(헤더 없는)Stack - (헤더 없는)tab - stack 도 GNB/LNB 를 나눌 수 있고
(헤더 없는)tab - stack 이것도 GNB/LNB 를 나눌 수 있습니다.

… 결국 다시 차분히 해보니 해결되었네요… 삽질한 시간이 길었습니다.

안녕하세요 저도 hankkuu 님과 동일하게 GNB 와 LNB 로 나눠서 구성을 좀 하고 싶은데 샘플 소스나 가이드를 좀 받으수 있을까요? 부탁드리겠습니다~