当我使用Tab导航来显示其他屏幕时，如何调出抽屉[本地反应]

Question

最近，我正在设计一个应用程序。当我把两个导航合并为一个导航时，问题就来了。当屏幕位于选项卡导航内时，如何打开抽屉。安卓操作系统不支持向左滑动手势。因此，我必须为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());

对于副歌。。抽屉参考