抽屜標題不重疊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標題

回答

相關問題