React Native：如何从嵌套导航中打开无Tab与Drawer的独立屏幕？

要实现从Screen1打开不含Tab栏和抽屉的独立屏幕，只需把独立屏幕的Stack导航器提升到Drawer导航器的同级，脱离嵌套的Tab导航结构即可，完全模拟原生Activity/ViewController的全屏效果。

步骤1：重构导航结构 #

调整后的层级如下：

import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';

const Drawer = createDrawerNavigator();
const Tab = createBottomTabNavigator();
const MainStack = createStackNavigator();
const IndependentStack = createStackNavigator();

// 原Tab嵌套Stack的主页面结构
function MainTabs() {
  return (
    <Tab.Navigator>
      <MainStack.Navigator>
        <MainStack.Screen name="Screen1" component={Screen1} />
        <MainStack.Screen name="Screen2" component={Screen2} />
      </MainStack.Navigator>
      {/* 其他Tab页面可在此添加 */}
    </Tab.Navigator>
  );
}

// 独立全屏页面的Stack
function IndependentScreens() {
  return (
    <IndependentStack.Navigator>
      <IndependentStack.Screen name="FullScreen" component={FullScreen} />
      {/* 其他独立页面可在此添加 */}
    </IndependentStack.Navigator>
  );
}

// 根导航：Drawer与独立Stack同级
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Main" component={MainTabs} />
        <Drawer.Screen name="Independent" component={IndependentScreens} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

步骤2：从Screen1跳转至独立屏幕 #

在Screen1内部，直接通过导航对象触发跳转：

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

function Screen1() {
  const navigation = useNavigation();

  const openFullScreen = () => {
    navigation.navigate('FullScreen');
  };

  return (
    {/* 页面内容 */}
    <Button title="打开独立屏幕" onPress={openFullScreen} />
  );
}

原理说明 #

将独立页面的Stack放在Drawer导航器的同级后，跳转时会完全覆盖下层的Tab和Drawer视图，自然不会显示Tab栏与抽屉菜单，达到原生全屏页面的效果。

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