Как убрать предыдущий экран в родительском навигаторе? - PullRequest
Новая
       51

Как убрать предыдущий экран в родительском навигаторе?

0 голосов
/ 15 января 2020

Окружающая среда

react-navigation@3.11.1 | react-navigation-stack@1.4.0

С учетом следующей навигационной реакции 

import {
  createAppContainer,
  createStackNavigator,
  createSwitchNavigator,
  createBottomTabNavigator,
} from 'react-navigation';

const TutorialNavigator = createStackNavigator(
  {
    FirstScreen: ({ navigation }) => { },
    SecondScreen: ({ navigation }) => { },
  },
  {
    initialRouteName: 'FirstScreen',
  }
);

const AppNavigator = createBottomTabNavigator(
  {
    HomeNavigator: createStackNavigator(
      {
        FirstScreen: ({ navigation }) => { },
        SecondScreen: ({ navigation }) => { },
        ThirdScreen: ({ navigation }) => { },
        FourthScreen: ({ navigation }) => { },
      },
      {
        initialRouteName: 'FirstScreen',
      }
    ),
    ProfileNavigator: createStackNavigator({
      FirstScreen: ({ navigation }) => { },
      SecondScreen: ({ navigation }) => { },
    }, {
      initialRouteName: 'FirstScreen',
    }),
  },
  {
    initialRouteName: 'Home',
  }
);

const MainNavigator = createStackNavigator(
  {
    TutorialNavigator,
    AppNavigator,
  },
  {
    initialRouteName: 'AppNavigator',
    headerMode: 'none',
    mode: 'modal',
  }
);

const RootNavigator = createStackNavigator(
  {
    MainNavigator,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    initialRouteName: 'MainStackNavigator',
  }
);

export default createAppContainer(
  createSwitchNavigator(
    {
      RootNavigator,
    },
    {
      initialRouteName: 'Root',
    }
  )
);

Выполнение следующей навигации: 

RootNavigator -> MainNavigator -> AppNavigator -> HomeNavigator -> FirstScreen -> SecondScreen -> ThirdScreen

с последующим 

TutorialNavigator -> FirstScreen -> SecondScreen

с последующим 

HomeNavigator -> FourthScreen

Если я инициирую обратную навигацию с четвертого экрана HomeNavigator, я окажусь на третьем экране HomeNavigator (навигация по первой строке), поскольку стек TutorialNavigator был удален после того, как я от него отошли Я go вернулся с Четвертого экрана, я не хочу оказаться на третьем экране, но хочу попасть на Второй экран HomeNavigator?

Поскольку вариант использования ограничивает инициируемую навигацию от экранов TutorialNavigators до четвертого экрана HomeNavigator, вот мои рабочие попытки, которые приводят к несогласным Поведение с точки зрения анимации:

1-е: 

const parentNavigation = navigation.dangerouslyGetParent();

const goHome = NavigationActions.navigate({
  routeName: 'Home',
  action: NavigationActions.navigate({
    routeName: 'FirstScreen'
  })
});

const goToHomeFourthScreen = NavigationActions.navigate({
  routeName: 'FourthScreen',
  params: { subscriptionKey }
});

parentNavigation.dispatch(goHome);
parentNavigation.dispatch(goToHomeFourthScreen);

2-е 

navigation.dismiss();

parentNavigation.reset({
  routeName: 'FourthScreen',
  params: { subscriptionKey }
});

Не работает: 

parentNavigation.dispatch(
  StackActions.reset({
    key: 'AppNavigator',
    index: 0,
    actions: [
      NavigationActions.navigate({
        routeName: 'HomeNavigator'
      }),
      NavigationActions.navigate({
        routeName: 'FourthScreen'
      })
    ]
  })
);

Любые попытки отправить сброс с несколькими действиями не удается или не имеет никакого эффекта.

1 Ответ

0 голосов
/ 15 января 2020

Поскольку это стековый навигатор, то есть брат навигатора вкладок, как я могу выполнить сброс истории для навигатора вкладок или, точнее, для дочернего элемента (который является навигатором стека) навигатора вкладок?

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

/**
  Issuing this from the FirstScreen of the TutorialNavigator
*/

const goToHome = NavigationActions.navigate({
  routeName: 'HomeNavigator',
  action: NavigationActions.navigate({
    routeName: 'FirstScreen'
  })
});

const goToHomeFourthScreen = NavigationActions.navigate({
  routeName: 'FourthScreen'
});

navigation.dispatch(goToHome);
navigation.dispatch(goToHomeFourthScreen);

Это использует тот факт, что FirstScreen - первый экран навигатора стека в навигаторе вкладок, что обеспечивает чистую историю, в которую мы можем добавить sh новых экранов.

Хотя это решение по-прежнему не обеспечивает плавную анимацию, оно отклоняет наложенный навигатор, показывает Первый экран HomeNavigator, а затем перейдет к четвертому экрану HomeNavigator. Разве у нас не может быть анимации навигации, происходящей только при последней отправке?

...