Question

环境

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的ThirdScreen发起向后导航，我将在HomeNavigator的ThirdScreen（第一行的导航）上结束，因为一旦我离开了TutorialNavigator的堆栈，它就会被移除。 / p>

问题：

如何从TutorialNavigator的SecondScreen（第二行）导航到HomeNavigator的ThirdScreen，并从历史记录中删除ThirdScreen，即当我从FourthScreen返回时，我不想结束于ThirdScreen，但我想结束HomeNavigator的SecondScreen吗？

由于用例将导航从TutorialNavigators的屏幕限制到HomeNavigator的ThirdScreen，因此我的工作尝试从动画的角度来看产生不一致的行为：

第一：

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);

第二

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

任何尝试分派具有多个操作的重置的尝试都会失败或无效。

Answer 1

由于这是堆栈导航器，是选项卡导航器的兄弟，我如何为选项卡导航器或更确切地说为选项卡导航器的子项（堆栈导航器）发出历史记录重置？ / p>

到目前为止，这是我设法使其正常工作的唯一方法，但这并不理想

/**
  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是选项卡导航器中堆栈导航器的第一个屏幕，因此提供了干净的历史记录，我们可以将新的屏幕推送到其中。

尽管此解决方案仍不能提供平滑的动画，但它会取消堆叠的导航器，显示HomeNavigator的FirstScreen，然后导航到HomeNavigator的ThirdScreen。我们不能让导航动画仅在最后一次调度时发生吗？

如何在父导航器中删除上一个屏幕？

1 个答案: