Question

我有一个底部的标签导航器，其中每个标签是一个堆栈导航器。像这样

Tab1 --- Stack1|---Screen1-1-1
               |---Screen1-1-2
              

Tab2 --- Stack2|---Screen2-2-1
               |---Screen2-2-2

用户从Tab1 / Screen1-1-1开始，然后转到Stack1中的Screen1-1-2。

由于这是底部标签导航器，因此用户可以切换到tab2。

我的要求是当用户导航到Tab2时将Stack1状态重置为Screen1-1-1，以便当他们回到Tab1时显示Screen1-1-1。

我尝试使用StackActions和NavigationActions以及reset和replace变体。最后，我得出了以下解决方案，该解决方案需要注意以下事项

当用户移至Tab2时，过渡就如预期的那样，用户只会看到Screeen2-2-1
当用户移回Tab1时，出现一个动画，并且堆栈后退以显示Screen1-1-1

理想情况下，当用户返回Tab1且没有任何动画时，我只想显示Screen-1-1-1。以下是我使用React Navigation 4.x的解决方案。（这是使用4.x的旧项目，但是我也愿意看到任何更好的5.x解决方案）

// ... part of a functional component

const [resetAction, setResetAction] = useState(null)

const unsubBlur = navigation.addListener('didBlur', () => {
    unsubBlur.remove()
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: 'Screen1-1-1' })],
      key: null,
    });
    setResetAction(resetAction)
  });

  const unsubfocus = navigation.addListener('didFocus', () => {
    unsubfocus.remove()
    if(resetAction) {
      navigation.dispatch(resetAction)
      setResetAction(null)
    }
  })

我将NavigationAction保持在Screen1-1-1状态，并重新集中调度它。尝试在模糊状态下分派它不起作用，因为它试图在Tab-2 / Stack2上执行Navigation动作。

React Navigation-在Tab导航器中倒退堆栈导航器

0 个答案: