リアクト-ナビゲーション：隠す親ヘッダ

Question

問題：私は、通常の3つのバーの引き出しを開くには、ヘッダーのアイコンの代わりに、右

をスワイプで必要なものStackNavigatorを、含まれているTabNavigatorコンテナが含まれているDrawerNavigatorを持っています

私の解決策：はStackNavigator内部StackNavigatorが含まれているTabNavigatorコンテナを置き、DrawerNavigator

内

をStackNavigatorを入れて、私の解決策の問題：私は持っているので、私はTabNavigatorコンテナの内側に移動するとき私はダブルヘッダーを取得する（それは普通のことです2駅ckNavigators）と私はバック矢印のヘッダを隠すことができます、私は常に3つのタブのアイコンのヘッダーを残して取得します。

どのように私はTabNavigatorを含む親のヘッダーを隠すことができますか？

//the drawer navigator 
 
const DNav = DrawerNavigator({ 
 
     SportWall: { 
 
      screen: SportWall 
 
      } 
 
     }) 
 
     
 
//the stack that contains the tab navigator 
 
export default StackNavigator({ 
 
    SportWall: { 
 
     //just to show the header with the 3 bars icon 
 
     screen: SportWall 
 
    } 
 
    
 
render() { 
 
    return (
 
     <Tabs/> 
 
) 
 
} 
 
    
 
//the tab navigator 
 
const Tabs = TabNavigator({ 
 
    AllPubs: { 
 
     screen: AllPubs 
 
    }, 
 
    FriendsPubs: { 
 
     screen: FriendsPubs 
 
    }, 
 
}); 
 

 
//the stack inside each tab 
 
export default StackNavigator({ 
 
    AllPubs: { 
 
     screen: AllPubs, 
 
    }, 
 
    Pub: { 
 
     screen: Pub, navigationOptions: {tabBarVisible: false} 
 
    },...

Answer 1

こんにちはあなたはこの例のように、あなたのStackNavigatorを使用してheaderMode: 'screen'を使用することができます。

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen } 
    },{ 
    headerMode: 'screen' 
    } 
); 

は、より多くの情報のためhereを参照してください。

Answer 2

引き出しを表示するヘッダーを表示するためだけにStackNavigatorを使用しないでください。あなたはそれを必要とするすべての画面用に引き出したonPressを発射​​左側のハンバーガーボタンでカスタムヘッダーを設定することができ ：

<Button 
    onPress={() => this.props.navigation.navigate('DrawerOpen')} 
    title="Open drawer" 
/> 

はheaderModeを変更ナビゲーターオプション