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的{{1}}属性中指定子导航器的状态：

route

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

在这里，似乎您只想要navigation.reset({ index: 1, routes: [ { name: 'Screen1', state: { routes: [{ name: 'Tab2' }], }, }, { name: 'Screen1', state: { routes: [ { name: 'Tab2', state: { routes: [{ name: 'Screen5' }, { name: 'Screen4' }] }, }, ], }, }, ], })，而不是navigate。如果reset是本机堆栈中的Screen5，则：

initialRouteName

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

1 个答案: