React Native中使用React Navigation如何从模态屏幕push新屏幕且不关闭模态

该需求完全可以实现，navigation.push不生效的核心原因是：你当前调用push方法的navigation对象绑定的是根导航栈，而全屏模态是根栈中层级最高的独立路由，直接push的新页面会渲染在模态下方，视觉上被遮挡，看起来就像没有生效。

方案一：模态内部嵌套独立子导航栈（推荐） #

这是最符合React Navigation设计规范的实现方式，所有push操作都在模态内部的子栈执行，不会影响根栈结构，也不需要关闭现有模态。
操作步骤：

1. 单独定义模态内部使用的子导航栈，把原模态首页和需要push的test页面都注册到这个子栈中
2. 根栈注册全屏模态时，指向该子栈组件而非原模态首页
   代码示例：

import { createNativeStackNavigator } from '@react-navigation/native-stack';

// 模态内部子栈定义
const ModalStack = createNativeStackNavigator();
function ModalInnerGroup() {
  return (
    <ModalStack.Navigator screenOptions={{ headerShown: false }}>
      {/* 原模态首页作为子栈初始路由 */}
      <ModalStack.Screen name="ModalHome" component={你的原模态页面组件} />
      {/* 要push的test页面注册到子栈 */}
      <ModalStack.Screen name="Test" component={你的Test页面组件} />
    </ModalStack.Navigator>
  );
}

// 根栈配置调整
const RootStack = createNativeStackNavigator();
function RootNavigator() {
  return (
    <RootStack.Navigator>
      {/* 其他根栈原有页面 */}
      <RootStack.Screen name="MainHome" component={首页组件} />
      {/* 全屏模态指向子栈，保留全屏模态配置 */}
      <RootStack.Screen 
        name="FullModal" 
        component={ModalInnerGroup}
        options={{ presentation: 'fullScreenModal' }}
      />
    </RootStack.Navigator>
  );
}

配置完成后，在原模态页面中直接调用navigation.push('Test')即可在模态内部正常push新页面，不需要关闭现有模态。如果需要关闭整个模态，调用根栈的navigation.dismiss()即可一次性关闭所有模态内的页面。

方案二：根栈新增叠层模态 #

如果你不想嵌套子栈，也可以直接在根栈注册Test页面，将它的presentation也配置为fullScreenModal，调用navigation.navigate('Test')即可在现有模态之上叠加新的全屏模态，原有模态不会被关闭。

• 以上配置基于React Navigation 6.x 版本的NativeStack实现，如果你使用的是旧版JS Stack，需要将presentation配置替换为mode: 'modal'
• 嵌套子栈方案中，子栈和根栈的路由上下文相互独立，子栈内部的push/pop操作不会触发根栈的变化

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