抽屉标题不重叠StackNavigator标题

我正在使用DrawerNavigator标题和堆栈导航。当抽屉打开时，它不会与标题重叠。这是我的代码抽屉标题不重叠StackNavigator标题

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', 
    }, 
    } 
);

现在抽屉重叠头，但是插头从其他组件消失：如果我在元素上点击抽屉，例如设置，此屏幕上不再有标题。我该如何正确解决这个重叠问题？

来源

2017-10-18 lexis

你'''DrawNavigator'''应该是最外面的导航容器，而不是其他方式 – Wainage

所以第二个代码？你有没有想法如何保持标题在第二个代码中的不同组件中可见？ – lexis

的DrawerNavigator必须是为了使它重叠报头，并且每个屏幕内必须声明一个StackNavigator内，如下面

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

来源

2017-10-18 14:42:19 wizloc

谢谢，但在WelcomeContainer中创建的左侧和右侧标头组件不再出现，并且当我导航到另一个屏幕时后退按钮也消失 – lexis

抽屉标题不重叠StackNavigator标题

回答

相关问题