如何在React Navigation v5中重置状态？

Question

如何使用navigation.reset属性重置（或创建新的导航历史记录）当前导航状态并创建一个新的导航状态。

我具有这种路由器结构（请参见下面的示例），我想从Screen 3导航到Screen4。导航后，我应该可以按“后退”按钮来浏览历史记录。就我而言，它应该是Screen5的默认屏幕（Tab2）。

NativeStackNavigator
  Screen1
     BottomTabNavigator
       Tab1
       Tab2
         NativeStackNavigator
            Screen5 (default) <- navigate here after back button was pressed
            Screen4 <- to this route
       Tab3
       Tab4
  Screen2
  Screen3 <- from this route

目前，我能够通过以下代码实现这一目标。但是，不幸的是，back按钮在标题内不存在。

props.navigation.reset({
  index: 1,
  routes: [
    {
      name: 'Screen1',
      params: {
        screen: 'Tab2',
      },
    },
    {
      name: 'Screen1',
      params: {
        screen: 'Tab2',
        params: { screen: 'Screen4' },
      },
    },
  ],
})

附加信息：

package.json

"@react-navigation/bottom-tabs": "^5.5.1",
"@react-navigation/native": "^5.5.0",
"react-native-screens": "~2.2.0",

更新＃1我宁愿希望在重置状态后保留历史记录。

更新＃2通过使用以下示例，我能够完成此任务。感谢@ satya164。

navigation.navigate('Screen1', {
  screen: 'Tab2',
  params: {
    initial: false,
    screen: 'Screen4',
  },
});

Answer 1

您可以在state的route属性中指定子导航器的状态：

navigation.reset({
  index: 1,
  routes: [
    {
      name: 'Screen1',
      state: {
        routes: [{ name: 'Tab2' }],
      },
    },
    {
      name: 'Screen1',
      state: {
        routes: [
          {
            name: 'Tab2',
            state: {
              routes: [{ name: 'Screen5' }, { name: 'Screen4' }]
            },
          },
        ],
      },
    },
  ],
})

但这将用全新的状态重置导航状态，并卸载和重新安装某些屏幕。您可以保留dispatch docs中所示的旧路线，但它仅适用于当前导航器，不适用于子导航器。

[这里，似乎您只想要dispatch，而不是navigate。如果reset是本机堆栈中的Screen5，则：

initialRouteName