TabNavigation을 사용하여 반응 탐색에 헤더를 표시하는 방법

Question

StackNavigation의보기에 머리글 제목이 표시되지만 TabNavigation에서 같은 화면을 설정하면 머리글이 표시되지 않습니다. 각 탭 주위에 StackNavigation을 래핑하거나 StackNavigation 안에 중첩 된 TabNavigation을 래핑하는 경우에만 헤더가 표시됩니다.

왜 TabNavigation의 스크린에 헤더가 표시되지 않습니다 - 예상되는 동작입니까? 그렇다면 각 탭에 StackNavigation을 설치하는 것이 좋습니까? 아니면 TabNavigation 주변에 하나의 큰 StackNavigation을 설치하는 것이 좋습니까?

// 탭 탐색 내가 StackNavigator

default StackNavigator({ 
    Home: { screen: TabsNavigator }, 
}); 

에 포장 또는 그것을 이런 식으로 작업을 수행하는 것이 좋습니다 때

const TabsNavigator = TabNavigator({ 
    Home: { 
    screen:HomeScreen, 
    }, 
    Profile: { 
    screen: ProfileScreen, 
    }, 
}, { 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
    navigationOptions: { 
    header: { 
     visible: true, 
    }, 
    }, 
}); 

헤더를 보여줍니다 각 화면에서 헤더 제목을 표시하지 않습니다

export TabsNavigator = TabNavigator({ 
     Home: { 
     screen:StackNavigator({ 
      Home: { screen: HomeScreen }, 
     }), 
     }, 
     Profile: { 
     screen: StackNavigator({Profile: {screen: ProfileScreen}}), 
     }, 
    }, { 
     tabBarOptions: { 
     activeTintColor: '#e91e63', 
     }, 
     navigationOptions: { 
     header: { 
      visible: true, 
     }, 
     }, 
    }); 

Answer 1

React-Navigation TabNavigator Docs에 따르면 헤더 네비게이션 옵션이 없습니다. 따라서 다음 코드를 작성할 때 실제로 존재하지 않는 값을 설정하고 있으므로 사용자가 수행중인 작업이 아무런 영향을 미치지 않습니다.

navigationOptions: { 
    header: { visible: true }, 
} 

슬프게도이 상황에서는 StackNavigator가 필요합니다.

Answer 2

비록 꽤 오래된 질문이라도 며칠 전이 질문을 던졌습니다. 그래서 앞으로 다른 사람에게도 유용 할 수 있기를 바라고 두 센트를 추가 할 것입니다.

React Navigation은 많은 양의 사용자 지정이 포함 된 놀라운 제품이지만 시작하기에 혼란 스럽기도하며 설명서의 일부 섹션에도 적용됩니다. 현재 버전 상태 인 navigationOptions은 모든 화면에 공통이지만 "사용 가능한 탐색 옵션 목록은 화면이 추가 된 탐색기에 따라 다릅니다." https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator이므로 header 옵션은 TabNavigator 자체에서는 사용할 수 없기 때문에 작동하지 않습니다.

앱 자체의 탐색 기능으로 수행하고자하는 작업에 따라 어떤 접근 방식이 가장 좋은지에 대한 질문에 대해 TabNavigator을 StackNavigator 안에 넣으면 TabNavigator 안에있는 모든 탭에 헤더 구성 요소가 공통적으로 적용됩니다. 이는 탭 전환이 적용되지만 헤더가 상단 위치에서 이동하지 않음을 의미합니다. 반면에 모든 탭 안에 StackNavigator을 중첩 시키려면 헤더가 모든 탭 안에 렌더링됩니다. 즉 헤더가 탭 전환 애니메이션을 따라 이동합니다.

나는 차이를보기 위해 demo을 신속하게 만들었으며, 함께 재생하려면 code도 사용할 수 있습니다.