JavaScript — использование вложенных навигаторов (StackNavigator и DrawerNavigator) в React Native со ссылкой на AppContainer, не может быть сброшено из-за отсутствия определенного маршрута

App.js

//App.js const RegisterStack = createSwitchNavigator( { // route list RegisterSelect: { screen: RegistrationSelectScreen, navigationOptions: { title: 'Sign Up' } }, RegisterInfo: { screen: RegistrationInfoScreen, navigationOptions: { title: 'Complete registration' } } }, { //defaultNavigationOptions }, ) const LoginStack = createStackNavigator( { // route list Login: { screen: LoginScreen, navigationOptions: { title: 'Login' }}, RegisterSelect: { screen: RegisterStack, navigationOptions: { title: 'Registration' }}, }, { //defaultNavigationOptions }, ); const HomeStack = createStackNavigator( { //Route List Home: { screen: BuyerHomeScreen }, AddListing: { screen: AddListingScreen }, Profile : { screen: ProfileScreen }, Settings: { screen: SettingsScreen }, }, { //NavigationOptions headerMode: 'none', }, } ); const DrawerList = createDrawerNavigator( { //Route List Profile: { screen: ProfileScreen, navigationOptions: { drawerLabel: 'Profile' } }, Settings: { screen: SettingsScreen, navigationOptions: { drawerLabel: 'Settings' } }, LogOut: { screen: LoginScreen, navigationOptions: (navigation) ={amp}gt; { return { drawerLabel: 'Log Out' } } }, HomeStack: { screen: HomeStack, navigationOptions: { drawerLabel: () ={amp}gt; {return null} //Hide label. Need Homestack in drawerStack for smooth transition back } } }, { //Navigation Option initialRouteName: 'HomeStack', headerMode: 'none', drawerWidth: '50%', } ); //function that checks if current screen is the RootScreen of the stack let isRootScreen = (navigation) ={amp}gt; navigation.state.routes[navigation.state.index].index === 0; const MainAppStack = createStackNavigator( { Drawer: { screen: DrawerList }, }, { //return function that returns an element. Menu in Homescreen, back button everywhere else. defaultNavigationOptions: ({navigation}) ={amp}gt; { return { headerLeft: ( isRootScreen(navigation) ? {amp}lt;MaterialIcons onPress={() ={amp}gt; { navigation.toggleDrawer(); }} /{amp}gt; : {amp}lt;Feather size = {35} name='arrow-left' color="white" onPress = {() ={amp}gt; {navigation.goBack(null)}}/{amp}gt; ), drawerLabel: () ={amp}gt; {return null}, headerMode: 'float', }; } } ) const RootStack = createSwitchNavigator( { LoginStack: { screen: LoginStack}, MainApp: { screen: MainAppStack }, }, { initialRouteName: 'LoginStack', } ); const AppContainer = createAppContainer(RootStack); export default class App extends React.Component { render() { return ( {amp}lt;Provider{amp}gt; {amp}lt;AppContainer ref={navigatorRef ={amp}gt; { NavigationService.setTopLevelNavigator(navigatorRef); }} /{amp}gt; {amp}lt;/Provider{amp}gt; ); } }; 

Login.js

 //Login.js . . import NavigationService from '../navigation/navigationService'; . . const LoginScreen = ({ navigation }) ={amp}gt; { if (navigation.state.routeName === 'LogOut') { NavigationService.navigateAndReset('AppContainer') }; //Login Logic. Left out for simplicity return ( {//returns the login Component. Taken out for simplicity} ); }; export default LoginScreen; 

navigationSerivce.js

Получил часть этого кода из этого другого набора вопросов и ответов

 //navigationService.js import { NavigationActions, StackActions } from 'react-navigation'; let _navigator; function setTopLevelNavigator(navigatorRef) { _navigator = navigatorRef; } function navigateMainNavigator(routeName, params) { _navigator.dispatch( NavigationActions.navigate({ routeName, params, }), ); } function navigateAndReset(routeName, params) { _navigator.dispatch( StackActions.reset({ index: 0, actions: [ NavigationActions.navigate({ routeName, params, }), ], }) ); } // add other navigation functions that you need and export them export default { setTopLevelNavigator, navigateMainNavigator, navigateAndReset, }; 

Любая помощь будет принята с благодарностью. Благодарность!

Если не использовать навигационный сервис, просто меню ящика остается основным навигатором, где основным навигатором должен быть RootStack.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector