React Navigation v6：如何避免使用push时组件卸载？

为什么会出现组件卸载？ #

• navigate的行为逻辑：调用navigate("TabNavigator", ...)时，React Navigation会识别目标是已存在的Tab容器，仅切换到指定子栈（如ProfileStack），不会重建Tab Navigator实例，因此原有Tab下的所有组件保持挂载状态，不会卸载。
• push的行为逻辑：push的作用是往当前导航栈添加全新路由实例。你这里push的是整个TabNavigator，相当于在导航栈中新建了一个Tab容器，原Tab容器会被移出栈，对应的所有组件自然会被卸载——因为整个容器实例已被替换。

解决方法：直接操作子栈而非外层Tab容器 #

核心需求是在ProfileStack中保留多个ProfileScreen实例并让返回按钮正常工作，正确做法是直接对ProfileStack子栈调用push，而非操作外层Tab Navigator：

情况1：当前屏幕就在ProfileStack内 #

若用户已在某个ProfileScreen中，直接调用当前屏幕的导航对象push即可：

navigation.push("ProfileScreen", {
  userId: newUserId,
});

情况2：从其他Tab的屏幕跳转过来 #

先切换到ProfileStack标签，再在子栈内push新页面（需保留之前的ProfileScreen时）：

// 切换到ProfileStack标签，确保子栈处于活跃状态
navigation.navigate("ProfileStack");
// 获取子栈导航对象并push新页面
navigation.getParent("ProfileStack")?.push("ProfileScreen", {
  userId: newUserId,
});

关键注意点 #

确保ProfileStack是用createStackNavigator创建的栈导航器，哪怕初始仅包含一个ProfileScreen。只有栈导航器支持push操作添加新屏幕实例，这样既能保留原有Tab组件，又能实现个人资料页面的栈式导航。

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