TabNavigationで反応ナビゲーションにヘッダーを表示する方法

Question

StackNavigationのビューにヘッダータイトルが表示されていますが、TabNavigationでこれらの同じ画面を設定してもヘッダーは表示されません。各タブの周りにStackNavigationをラップするか、StackNavigation内に入れ子になったTabNavigationをラップするだけで、ヘッダーが表示されます。

なぜTabNavigationの画面にヘッダーが表示されないのですか。もしそうなら、各タブにStackNavigationを持たせる方がいいでしょうか、TabNavigationの周りに1つ大きな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

これはかなり古い質問ですが、私は数日前にこの質問をしていましたので、今後これについて他の人にも役立つことを願って私は2セントを追加します。

リアクションナビゲーションは、カスタマイズの量が非常に多い驚くべき製品ですが、時には紛らわしいこともあります。これは、ドキュメントのいくつかのセクションにも当てはまります。 navigationOptions現在のバージョンの状態は、すべての画面で共通ですが、使用可能なナビゲーションオプションのリストは、画面が追加されるナビゲータによって異なります。 https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigatorしたがってheaderオプションはTabNavigator自体で利用できないため機能しません。

あなたのアプリケーション自体のナビゲーションで何を達成したいのかによって、どのアプローチが最も良いかという質問について。 TabNavigatorをStackNavigatorに入れると、TabNavigator内のすべてのタブでヘッダーコンポーネントが共通化されます。つまり、タブの切り替えは有効になりますが、ヘッダーは上端から移動しません。一方、すべてのタブ内にStackNavigatorをネストすることを選択した場合、ヘッダーはすべてのタブ内にレンダリングされます。つまり、ヘッダーはタブトランジションアニメーションに沿って移動します。

demoあなたはその違いを見ることができます。codeも利用できます。