React Navigation v6切换栈内屏幕时如何保留页面实例不被弹出？

环境版本 #

{
  "react-native": "0.71.8",
  "@react-navigation/bottom-tabs": "^6.3.3",
  "@react-navigation/drawer": "^6.4.4",
  "@react-navigation/material-bottom-tabs": "^6.2.13",
  "@react-navigation/native": "^6.0.12",
  "@react-navigation/native-stack": "^6.8.0"
}

当前路由状态 #

当前导航路由栈结构如下：

1: {key: 'ClubScreen-PVQtJb1EkSv6q_wqPYpAi', name: 'ClubScreen', path: undefined, params: {…}}
2: {key: 'GameRoom538', name: 'GameRoom', path: undefined, params: {…}}
3: {key: 'GameRoom537', name: 'GameRoom', path: undefined, params: {…}}

遇到的问题 #

调用以下代码时，可以回到栈中第二个GameRoom538屏幕，且页面状态保留无需重新加载，但同时栈顶的GameRoom537会被弹出：

navigation.navigate({name:'GameRoom',key:'GameRoom538',params:{}})

后续再调用以下代码时，由于GameRoom537已不在导航栈中，会重新创建新的页面实例：

navigation.navigate({name:'GameRoom',key:'GameRoom537',params:{}})

需要一种在切换这类多实例屏幕时，能将它们保留在内存中的方法。

已尝试的方案 #

在GameRoom屏幕的栈配置中设置getId属性，根据参数中的id生成唯一标识，但问题仍未解决：

<Stack.Screen
  ...
  getId={({ params: { id } }) => id}
/>

解决方案 #

由于之前使用的是栈导航器，返回屏幕时会自动弹出栈顶页面，导致实例被销毁。解决方法是：

• 为需要保留内存状态的屏幕单独使用标签导航器
• 使用TabActions.jumpTo进行页面切换
• 隐藏标签栏，保证体验流畅

内容的提问来源于stack exchange，提问作者Radu