Реагировать на встроенную вложенную навигацию - вернуться к исходному маршруту навигатора стека при щелчке маршрута родительского ящика

Я использую следующую настройку навигации в моем проекте React Native. Здесь я использую навигацию по ящикам и навигацию по стеку.

import MainScreen from '../components/MainScreen';
import SettingsScreen from '../components/SettingsScreen';
import FriendsListScreen from '../components/FriendsListScreen';
import FriendProfileScreen from '../components/FriendProfileScreen';

// stack navigator - 1
const MainScreenStack = createStackNavigator(
    {
        MainScreen: MainScreen,
        FriendsListScreen: FriendsListScreen,
        FriendProfileScreen: FriendProfileScreen,
    },
    {
        initialRouteName: 'MainScreen',
        navigationOptions: {
            drawerLabel: "Home"
        },
    }
);

// stack navigator - 2
const SettingsScreenStack = createStackNavigator(
    {
        SettingsScreen: SettingsScreen
    },
    {
        navigationOptions: {
            drawerLabel: "Settings"
        },
    }
);

// drawer navigation (stack navigator 1 + 2)
const AppNavigator = DrawerNavigator({
  MainScreen: MainScreenStack,
  SettingsScreen: SettingsScreenStack
});

const AppContainer = createAppContainer(AppNavigator)

Сценарий:

  • Из ящика я нажимаю ссылку «Домой» и перехожу на главный экран.
  • На главном экране я нажимаю кнопку и перехожу к FriendsListScreen.
  • На экране FriendsListScreen я снова открываю ящик и нажимаю ссылку «Домой». Ящик закрывается, и никакой навигации не происходит.

Макет:

введите описание изображения здесь введите описание изображения здесь введите описание изображения здесь

Есть ли способ вернуться к главному экрану, когда я нажимаю ссылку «Домой» из ящика?


react-native react-navigation react-navigation-drawer react-navigation-stack
person Arun D    schedule 01.02.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня есть обходной путь, создав пользовательское содержимое ящика, как показано ниже:

import {DrawerItems, SafeAreaView, createStackNavigator, createDrawerNavigator, createAppContainer} from "react-navigation";

const DrawerContent = (props) => (
  <ScrollView>
    <SafeAreaView forceInset={{top: 'always', horizontal: 'never'}}>
      <DrawerItems {...props} onItemPress={ ({route, focused}) => {
        if (route.key === "MainScreen") {
          if (route.routes.length === 1) {
            props.navigation.closeDrawer();
          } else {
            props.navigation.navigate(route.routes[0].routeName);
          }
        } else {
          props.onItemPress({route, focused});
        }
      }} />
    </SafeAreaView>
  </ScrollView>
);

const AppNavigator = DrawerNavigator({
  MainScreen: MainScreenStack,
  SettingsScreen: SettingsScreenStack
}, {contentComponent: DrawerContent});
person Arun D    schedule 07.02.2019