当我使用 Tab 导航显示其他屏幕时如何调出抽屉 [react native]

如何解决当我使用 Tab 导航显示其他屏幕时如何调出抽屉 [react native]

最近，我正在设计一个应用程序。这就是我将两个导航合二为一时的问题。 当屏幕位于标签导航内时，如何打开抽屉。 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>
  );
}

解决方法

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

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..