本文介绍了我如何使用 React Navigation v5 保留带有嵌套导航的初始路线?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

首先让我声明我知道如何使用 React 导航从一个嵌套页面导航到另一个嵌套页面.但是,每当我导航到不是初始路由的嵌套屏幕时,只要我导航回该嵌套堆栈,该屏幕就会成为第一个屏幕.

First let me state that I know how to navigate from one nested page to another using react navigation. However, whenever i navigate to a nested screen that is not the initial route, that screen now become the first screen whenever i navigate back to that nested stack.

示例.

  • 父导航器
    • 嵌套堆栈导航器 1
      • 屏幕 A(初始路线)
      • 屏幕 B
      • 屏幕 C(初始路线)
      • 屏幕 D
      • 屏幕 E(初始路线)
      • 屏幕 F

      通常当从一个堆栈导航到 Nested Stack Navigator 2 时,我使用以下内容.

      Normally when navigating from one stack to Nested Stack Navigator 2 the I use the following.

      navigation.navigate('Nested Navigator 2');
      

      这将我带到 screen C,这是预期的行为.但是,每当我从另一个堆栈导航到 screen D 时,我注意到每当我使用上述代码导航回 Nested Stack Navigator 2 它不再打开 screen C 而是打开screen D.

      Which takes me to screen C, this is the expected behaviour. However, whenever i'm navigating from another stack to screen D, I notice that whenever i navigate back to Nested Stack Navigator 2 with the above code it no longer opens up screen C it opens up screen D instead.

      这就是我从另一个堆栈导航到 screen D 的方式.

      This is how I navigate to screen D from another stack.

      navigation.navigate('Nested Navigator 2', { screen: 'screen D', initial: false });
      

      无论何时使用 screen D 作为初始路由,事件虽然我在导航调用中指定了 initial: false.有没有办法防止这种情况发生?

      Whenever this is used screen D acts as the initial route, event though I specified initial: false in the navigation call. Is there a way to prevent this?

      推荐答案

      一旦导航到嵌套堆栈导航的初始路由组件以外的另一个组件,navigation.navigate('Nested Navigator 2'); 不起作用

      once you navigate to a another component other than intial route component, of a Nested Stack Navigation, navigation.navigate('Nested Navigator 2'); will not work

      最初您的导航堆栈将在初始路线上查看

      Initial your navigation stack will look this on intial routes

      [
       { name: ScreenA },
       { name: ScreenC },
       { name: ScreenE }
      ]
      

      但是每当你从屏幕 C 导航到屏幕 D 时,屏幕 D 的路由将不会插入堆栈的末尾,因为它是嵌套导航二

      but whenever you navigate from sreen C to Screen D, Screen D will route will not inserted at the end of the stack , since it is Nested Navigation two

      [
       { name: ScreenA },
       {
         name: NestedNavigator,
         [
          { name: screenC },
          { name: screenD }
         ]
       },
       { name: ScreenE }
      ]
      

      所以你需要使用,navigation.navigate('Nested Navigator 2', { screen: 'screen D' });这是因为当您导航到初始路线以外的屏幕时,堆栈会发生变化,

      so you will need to use,navigation.navigate('Nested Navigator 2', { screen: 'screen D' });that is because stack changes when you navigate to a screen other than initial route,

      您需要在嵌套组件上重置路由,即每当您导航到屏幕 D,使用 commonActions 重置路由堆栈,设置屏幕,这将更新堆栈,并从堆栈中删除屏幕 D.

      you will need to reset routes on on Nested Component , i.e. whenever you navigate to screen D, reset route stack using commonActions, set screen, this will update the stack , and remove screen D from the stack.

      import { CommonActions } from '@react-navigation/native';
      
      componentDidMount() {
         this.props.navigation.addListener('blur', () => {
                  this.props.navigation.dispatch(
                      CommonActions.reset({
                        index: 1,
                        routes: [
                          { name: 'ScreenC' },
      
                        ],
                      })
                    );
              });
          }
      

      如果您只想删除某个路线而不是重置整个导航

      if you want to remove a certain route only instead of resetting whole navigation

       this.props.navigation.dispatch(state => {
                  // Remove the route from the stack
                  const routes = state.routes.filter((r => r.name !== 'ScreenC' ));
      
                  return CommonActions.reset({
                    ...state,
                    routes,
                    index: routes.length - 1,
                  });
                });
      

      这篇关于我如何使用 React Navigation v5 保留带有嵌套导航的初始路线?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-06 00:40