当我使用标签导航显示其他屏幕时如何调出抽屉[反应原生]

Question

最近，我正在设计一个应用程序。当我将两个导航合二为一时，这就是问题所在。 当屏幕位于选项卡导航内时，如何打开抽屉。 Android 操作系统不支持向左滑动手势。因此，我必须为 Android 用户添加一个菜单按钮。

有什么方法可以调出抽屉吗？

function DrawerNav() {
  return (
    <Drawer.Navigator
      drawerContent={(props) => <DrawerContent {...props} />}
      initialRouteName="Home"
    >
      <Drawer.Screen name="Home" component={TabNav} />
      
    </Drawer.Navigator>
  );
}

function TabNav() {
  return (
    <Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        style: {
          flex: 1,
          position: "absolute",
          bottom: "5%",
          left: "5%",
          right: "5%",
          height: win.height * 0.08,
          elevation: 0,
          backgroundColor: "#f7f7f7",
          borderRadius: 15,
          ...styles.shadow,
          paddingVertical: "5%",
          paddingHorizontal: "5%",
        },
      }}
    >//Some screen here
      ),
        }}
      />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <DrawerNav />
    </NavigationContainer>
  );
}

function Feed({ navigation }) {
  return (
    <SafeAreaView style={styles.container}>
      <TouchableOpacity
        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
      >
        <Image
          source={require("./app/assets/menu.png")}
          style={{ position: "absolute", top: 10, width: 40, height: 40 }}
        />
      </TouchableOpacity>
    </SafeAreaView>
  );
}

function App() {
  return (
    <NavigationContainer>
      <DrawerNav />
    </NavigationContainer>
  );
}

Answer 1

您可以像这样使用，您需要将您的标签导航放入抽屉式导航中，它将在您的所有标签屏幕中可用。我正在使用堆栈导航，但它与标签导航相同

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';
import Home from "./screen/Home" 
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import Search from "./screen/Search"
import Login from "./screen/Login"
import SuperRegister from "./screen/SuperRegister"
import CustomDrawer from "./Components/CustomDrawer"
import { createDrawerNavigator } from '@react-navigation/drawer';
import {MyContextprovider} from"./Context";
const Stack = createStackNavigator();
function MyStack(){
  return (
      <Stack.Navigator
      headerMode={false}
      initialRouteName="Login"
      >  
      <Stack.Screen name="SuperRegister" component={SuperRegister} />   
      <Stack.Screen name="Login" component={Login} />  
      <Stack.Screen name="Home" component={Home} />  
      <Stack.Screen name="Search" component={Search} />
      </Stack.Navigator>  
  );
}
const Drawer = createDrawerNavigator();
App = () => {
  return (
    <NavigationContainer>
     <Drawer.Navigator
     drawerContent={(props)=><CustomDrawer {...props} />}
     >
      <Drawer.Screen name="Home" component={MyStack} />      
      </Drawer.Navigator>
    </NavigationContainer>
  );
}
export default () => {
  return (
    <MyContextprovider>
      <App />
    </MyContextprovider>
  )
}

您可以使用打开或关闭抽屉

navigation.dispatch(DrawerActions.openDrawer());
navigation.dispatch(DrawerActions.closeDrawer());
navigation.dispatch(DrawerActions.toggleDrawer());

为了避免..drawer ref..