Question

我想在Drawer.Screen内添加NavigationContainer，但不想在抽屉上显示。

<NavigationContainer>
    <Drawer.Navigator initialRouteName="Search">
      <Drawer.Screen name="Search" component={SearchScreen} />
      <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      <Drawer.Screen name="DetailScreen" component={DetailScreen} />
    </Drawer.Navigator>
  </NavigationContainer>

我不想在抽屉中显示DetailScreen，但希望保留它，以便可以导航到组件内部的此屏幕。

Answer 1

尝试：如果您使用的是React导航5（似乎是这种情况）

您将需要安装堆栈导航器；确保有它
使用
将其导入您的主容器文件中
从'@ react-navigation / stack'导入{createStackNavigator};

然后就这样做

 <Stack.Navigator>
    <Stack.Screen
      name="DetailScreen"
      component={DetailScreen}
    />
   // add the whole drawer as a stack screen and you shall have what you want
    <Stack.Screen
      name="drawer"
      component={DrawerNavigation}
      headerShown={false}
      options={{headerMode: 'none', headerShown: false}}
    />
    </Stack.Navigator>
</NavigationContainer>

然后，您必须创建另一个文件以在其中添加抽屉式导航，例如：

DrawerNavigation.js并将其导出以在主导航器中使用，如下图所示

<Drawer.Navigator initialRouteName="Search">
  <Drawer.Screen name="Search" component={SearchScreen} />
  <Drawer.Screen name="Notifications" component={NotificationsScreen} />
  <Drawer.Screen name="DetailScreen" component={DetailScreen} />
</Drawer.Navigator>

SceneNavigator 是主要的导航器。

抽屉式导航器代码的示例屏幕已作为组件导出

import React from 'react';
import {Dimensions, Platform} from 'react-native';
import {createDrawerNavigator} from '@react-navigation/drawer';

import Home from '../scenes/Home';
import SideMenu from './SideMenu';

const Drawer = createDrawerNavigator();

const AppDrawerNavigator = () => {
  return (
    <Drawer.Navigator
      initialRouteName="home"
      // this is for custom design for drawer
      drawerContent={(props) => <SideMenu {...props} />}
      drawerType="slide"
      edgeWidth={250}
      hideStatusBar={Platform.OS === 'android' ? true : false}
      drawerPosition="left"
      drawerStyle={{
        width:
          Dimensions.get('window').width - Dimensions.get('window').width / 5,
      }}>
      <Drawer.Screen name="home" component={Home} />
    </Drawer.Navigator>
  );
};
export default AppDrawerNavigator;

Answer 2

您可以做的是创建一个堆栈导航器，然后根据使用情况将堆栈导航器嵌套为一个抽屉式屏幕或两个抽屉式屏幕，这样您就可以导航到该屏幕但不显示它在抽屉里。例如，

const NotificationsAndDetails = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Notifications" component={NotificationsScreen} />
      <Stack.Screen name="DetailScreen" component={DetailScreen} />
    </Stack.Navigator>
  );
};

<NavigationContainer>
    <Drawer.Navigator initialRouteName="Search">
      <Drawer.Screen name="Search" component={SearchScreen} />
      <Drawer.Screen name="NotificationsAndDetails" component={NotificationsAndDetails} />
    </Drawer.Navigator>
</NavigationContainer>

更多有关嵌套导航器的信息：https://reactnavigation.org/docs/nesting-navigators/

抽屉导航器-添加屏幕而不在抽屉中显示

2 个答案: