React Native Drawer Navigation 总是自动关闭
React Native Drawer Navigation always closing automatically
我有一个使用 React Navigation 的 React Native 应用程序。该应用程序已经包含一个 Tab Navigator 嵌套 Stack Navigators。现在我还想在最顶层添加一个抽屉导航,显示自定义抽屉内容。
所以我的层次结构是 DrawerNavigator(嵌套 1 个 TabNavigator)> TabNavigator(嵌套 5 个 StackNavigator)> Stack Navigator(嵌套实际内容屏幕的单个数量)。
为此,我在顶层添加了抽屉导航器,嵌套了现有的选项卡导航器:
<Drawer.Navigator
initialRouteName="MainTabNav"
drawerContent={props => <DrawerMenu {...props} />}
screenOptions={{
headerShown: false,
}}>
<Drawer.Screen name="MainTabNav" component={MainTabNavigator} />
</Drawer.Navigator>
我现在的问题是:当我从左向右滑动时,抽屉出现了,只要我把手指放在屏幕上,我就可以看到我的自定义抽屉导航组件。每当我从屏幕上移开手指时,抽屉导航会再次自动关闭。
此外,从 Stack Navigator 中的 Pressable 调用 navigation.dispatch(DrawerActions.openDrawer())
不会执行任何操作 - 抽屉根本不会打开。
...
import {useNavigation} from '@react-navigation/native';
import {DrawerActions} from '@react-navigation/native';
const DrawerMenuButton = props => {
const navigation = useNavigation();
return (
<Pressable
onPress={() => {
navigation.dispatch(DrawerActions.toggleDrawer());
}}>
...
有人知道解决这个问题的方法吗?
非常感谢和最诚挚的问候
智能家居制造商
P.S.:我的配置如下
"react": "17.0.2",
"react-native": "0.64.2",
"@react-navigation/drawer": "^6.1.3",
"@react-navigation/native": "^5.1.7",
"@react-navigation/stack": "^5.2.14",
"@react-navigation/bottom-tabs": "^5.5.2",
我看到@react-navigation/native 的版本是 v5。但是抽屉是v6。所以请将其降级到 v5。它会起作用。
npm install @react-navigation/drawer@^5.x
我有一个使用 React Navigation 的 React Native 应用程序。该应用程序已经包含一个 Tab Navigator 嵌套 Stack Navigators。现在我还想在最顶层添加一个抽屉导航,显示自定义抽屉内容。
所以我的层次结构是 DrawerNavigator(嵌套 1 个 TabNavigator)> TabNavigator(嵌套 5 个 StackNavigator)> Stack Navigator(嵌套实际内容屏幕的单个数量)。
为此,我在顶层添加了抽屉导航器,嵌套了现有的选项卡导航器:
<Drawer.Navigator
initialRouteName="MainTabNav"
drawerContent={props => <DrawerMenu {...props} />}
screenOptions={{
headerShown: false,
}}>
<Drawer.Screen name="MainTabNav" component={MainTabNavigator} />
</Drawer.Navigator>
我现在的问题是:当我从左向右滑动时,抽屉出现了,只要我把手指放在屏幕上,我就可以看到我的自定义抽屉导航组件。每当我从屏幕上移开手指时,抽屉导航会再次自动关闭。
此外,从 Stack Navigator 中的 Pressable 调用 navigation.dispatch(DrawerActions.openDrawer())
不会执行任何操作 - 抽屉根本不会打开。
...
import {useNavigation} from '@react-navigation/native';
import {DrawerActions} from '@react-navigation/native';
const DrawerMenuButton = props => {
const navigation = useNavigation();
return (
<Pressable
onPress={() => {
navigation.dispatch(DrawerActions.toggleDrawer());
}}>
...
有人知道解决这个问题的方法吗?
非常感谢和最诚挚的问候 智能家居制造商
P.S.:我的配置如下
"react": "17.0.2",
"react-native": "0.64.2",
"@react-navigation/drawer": "^6.1.3",
"@react-navigation/native": "^5.1.7",
"@react-navigation/stack": "^5.2.14",
"@react-navigation/bottom-tabs": "^5.5.2",
我看到@react-navigation/native 的版本是 v5。但是抽屉是v6。所以请将其降级到 v5。它会起作用。
npm install @react-navigation/drawer@^5.x