React Native Navigation单模态切换内容：避免多弹窗问题

完全可行，你可以通过嵌套栈的方式避免模态窗叠加，实现单个模态容器内切换不同页面内容，具体操作如下：

步骤1：创建嵌套的模态栈容器 #

把需要在模态窗内切换的Results和Viewer页面放在同一个Stack Navigator里，这个栈作为模态内容的容器：

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

const ModalStack = createStackNavigator();

function ModalNavigator() {
  return (
    <ModalStack.Navigator>
      {/* 两个页面都放在这个嵌套栈里，不需要单独设置presentation */}
      <ModalStack.Screen name="Results" component={ResultsScreen} />
      <ModalStack.Screen name="Viewer" component={ViewerScreen} />
    </ModalStack.Navigator>
  );
}

步骤2：在主栈中注册模态容器 #

在你的主导航栈里，只注册这个嵌套的模态容器，并给它设置presentation: 'modal'：

const MainStack = createStackNavigator();

function MainNavigator() {
  return (
    <MainStack.Navigator>
      {/* 你的其他主页面 */}
      <MainStack.Screen 
        name="ModalContainer" 
        component={ModalNavigator} 
        options={{ presentation: 'modal' }} 
      />
    </MainStack.Navigator>
  );
}

步骤3：导航逻辑调整 #

• 从主页面打开模态窗并显示Results页面：

// 主页面中触发导航
navigation.navigate('ModalContainer', { screen: 'Results' });

• 在ResultsScreen内切换到ViewerScreen（此时不会弹出新模态，只是在当前模态窗内切换内容）：

// ResultsScreen中触发导航
navigation.navigate('Viewer');

这样设置后，整个模态窗只会弹出一次，两个页面的切换都在同一个模态容器内完成，不会出现叠加的情况。

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