从另一个堆栈重置 React Stack Navigator答案

【问题标题】：Resetting React Stack Navigator from Another Stack从另一个堆栈重置 React Stack Navigator
【发布时间】：2020-06-14 07:50:01
【问题描述】：

当我在另一个 Stack 导航器中时重置 Stack Navigator 时遇到问题，情况如下：

用户登陆图书列表屏幕
用户导航到图书详细信息屏幕
用户通过底部导航/标签切换到设置屏幕
用户切换帐号

当用户切换帐户时，我需要清除图书导航堆栈，以便通过底部标签导航导航回图书堆栈不会显示不再属于活动帐户的屏幕/图书详细信息。

我怀疑这可以使用target 属性来实现，我只是不确定要输入什么。文档说它是包含路线 (https://reactnavigation.org/docs/navigation-actions/#goback) 的导航器的键。

this.props.navigation.dispatch({
  target: ???,               <-- how can I point this to the Books stack?
  ...CommonActions.reset({
     index: 1,
     routes: [
       { name: 'book-list' }
     ]
   })
});

但是，输入 target: 'books'，这是 Books 选项卡导航器的键，会产生以下错误：

The action 'RESET' with payload '{"index":1,"routes":[{"name":"book-list"}]}' was not handled by any navigator. If you are trying to navigate to a screen, check if the screen exists in your navigator.

这是导航结构：

NavigationContainer
--Tab.Navigator
----Tab.Screen (Books)
------Stack.Navigator
--------Stack.Screen (Book List)
--------Stack.Screen (Book Detail)
----Tab.Screen (Settings)
------Stack.Navigator
--------Stack.Screen (Settings Page)

理想情况下，我希望在用户切换帐户并且不导航到 Books 后重置 Books 导航器堆栈。

【问题讨论】：

此问题仅出现在 v5 中，仅供参考。

标签： react-native react-native-navigation

【解决方案1】：

我们遇到了类似的问题。在 v5 中试试这个：当您需要导航到 Books 堆栈时，您可以像这样直接导航到嵌套导航器。

this.props.navigation.navigate('Books', {screen: 'BookList'})

如果您使用“books”和“book-list”作为名称，请使用它来代替“Books”和“BookList”。这将确保它不会在旧数据仍然可见的情况下跳回具有先前 BookDetail 屏幕的 Books 堆栈。

【讨论】：

【解决方案2】：

中存在一个名为“screenOptions”的属性。将“unmountOnBlur”属性设置为 true 可以解决您的问题。当您移动到其他选项卡时，这基本上会重置堆栈。

用法：

<Tab.Navigator
    screenOptions={{
      unmountOnBlur: true,
    }}
>
...Tab screens
</Tab.Navigator>

【讨论】：