Drawerヘッダーが重複していないStackNavigatorヘッダー

Question

私はDrawerNavigatorヘッダーとスタックナビゲーションを使用しています。引き出しが開いているとき、それはヘッダーに重ならない。これは私のコードです

const AppDrawer = DrawerNavigator(
    { 
    Home: { 
     path: '/', 
     screen: WelcomeContainer, 
    }, 
    Category: { 
     path: '/sent', 
     screen: CategoryContainer, 
    }, 
    }, 
    { 
    initialRouteName: 'Home', 
    contentOptions: { 
     activeTintColor: '#e91e63', 
    }, 
    } 
); 


const AppNavigator = StackNavigator({ 
    Home: { 
    screen: AppDrawer, 
    navigationOptions: ({navigation}) => ({ 
     headerLeft: 
     <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}> 
     <Icon name="menu" color='#5c72b0' size={35} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center', 
     paddingLeft:10, 
     paddingRight:80 }} onPress={() => navigation.navigate('DrawerOpen') } /> 
     <ChangeLanguage style={{ margin: 30 , padding: 30}} /> 
     </View>, 
     headerRight: 
     <HeaderUserInformation />, 
    }) 
    }, 
    Settings: { 
    screen: SettingsContainer, 
    navigationOptions: ({navigation}) => ({ 
    title: navigation.state.params.title 
    }) 
}, 
    About: { 
    screen: About, 
    navigationOptions: ({navigation}) => ({ 
    title: navigation.state.params.title 
    }) 
} 
}) 

同じ問題がある別のスレッドが見つかりました。私はトップレベルにDrawNavigatorを移動しようとした、私のコードは次のようになります。

const AppNavigator = StackNavigator({ 
    Home: { 
    screen: WelcomeContainer, 
    navigationOptions: ({navigation}) => ({ 
     headerLeft: 
     <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center'}}> 
     <Icon name="menu" color='#5c72b0' size={35} style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems:'center', 
     paddingLeft:10, 
     paddingRight:80 }} onPress={() => navigation.navigate('DrawerOpen') } /> 
     <ChangeLanguage style={{ margin: 30 , padding: 30}} /> 
     </View>, 
     headerRight: 
     <HeaderUserInformation />, 
    }) 
    }, 
    Settings: { 
    screen: SettingsContainer, 
    navigationOptions: ({navigation}) => ({ 
    title: navigation.state.params.title 
    }) 
}, 
    About: { 
    screen: About, 
    navigationOptions: ({navigation}) => ({ 
    title: navigation.state.params.title 
    }) 
} 
}) 



const AppDrawer = DrawerNavigator(
    { 
    Home: { 
     path: '/', 
     screen: AppNavigator, 
    }, 
    Category: { 
     path: '/sent', 
     screen: CategoryContainer, 
    }, 
    }, 
    { 
    initialRouteName: 'Home', 
    contentOptions: { 
     activeTintColor: '#e91e63', 
    }, 
    } 
); 

今すぐ引き出しはしかし、ヘッダは、他のコンポーネントから姿を消し、ヘッダを重ねている：私は引き出しの上の要素をクリックすると、例えばこの画面にはもうヘッダはありません。この重複する問題を適切に修正するにはどうすればよいですか？

Answer 1

DrawerNavigatorは、ヘッダと重複するために、最も外側のナビゲーターでなければならず、内部の各画面はStackNavigator内で宣言されなければならない、

const AppDrawer = DrawerNavigator({ 
    Home: { 
    screen: StackNavigator({ 
     Home: { 
     screen: WelcomeContainer, 
     navigationOptions: { 
      title: "Welcome" 
     } 
     } 
    }) 
    }, 
    Category: { 
    screen: StackNavigator({ 
     Category: { 
     screen: CategoryContainer, 
     navigationOptions: { 
      title: "Category" 
     } 
     } 
    }) 
    } 
})