标签: react-navigation-drawer

在我的本机应用程序中，我使用 Drawer Navigator 创建了一个侧边菜单，当我通过滑动打开它时，它运行良好。但我想做的是点击按钮打开它。目前正在尝试做槽式导航道具，相关代码如下：

import { withNavigation } from 'react-navigation';

class HallsList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isSideMenuOpen: false
    };
  } 

  renderTopView = () => {
      return(
        <View>
          <View style = {Styles.sideMenuButton}>
            <Button
              onPress = {()=> {
                if (this.state.isSideMenuOpen) {
                  {this.props.navigation.navigate('DrawerOpen')}
                }
                else {
                  {this.props.navigation.navigate('DrawerClose')}
                }
                this.setState({isSideMenuOpen: !this.state.isSideMenuOpen})
              }
            }
            title = {'Side Menu'}
            />
          </View> ..... 


export default withNavigation(HallsList);

但是当我点击侧面菜单按钮时，它会被点击但之后没有任何反应。

PS：大多数 Youtube 视频或网络上的文章都没有使用 ReactNavigation v5，它们使用的是旧版本。当用户可以单击按钮导航到不同的屏幕（使用 StackNavigator）和 DrawerNavigator 以及在屏幕之间导航时，有人可以显示一个虚拟项目。屏幕必须有一个类和一个简单的文本，就是这样。谢谢！

我将抽屉设置在右侧，但屏幕标题中的汉堡包图标保持默认左侧，是否有任何属性可以通过将位置更改为右侧？我知道应该通过配置自定义标头来完成，但我不想过度设计我的小项目。

我刚刚从 React Native 5.x 迁移到 6.x，现在我的导航堆栈出现了问题。当我在抽屉导航器深处导航几个屏幕，然后按 Android 上的后退按钮（没有尝试过 IOS）时，它会直接带我回到第一个屏幕。我的导航堆栈如下

 <NavigationContainer theme={MyTheme}>
        <Drawer.Navigator
          initialRouteName="NewsFeed"
          drawerContent={(props) => <SideNav {...props} />}
          screenOptions={{ headerShown: true, header: (options) => <TopNav options={options} /> }}
        >
          <Drawer.Screen name="NewsFeed" component={NewsFeedScreen} />
          <Drawer.Screen name="Post" component={PostScreen} />
          <Drawer.Screen name="Users" component={UsersScreen} />
          <Drawer.Screen name="User" component={UserScreen} />
    ...
        </Drawer.Navigator>
      </NavigationContainer> 

我不确定问题是什么，也没有在任何地方找到任何答案。有人说将每个屏幕包裹在堆栈导航器中，其他人则说这是一个坏主意。

我是 React Native 的初学者，所以如果这是一个菜鸟问题，我深表歉意。我正在尝试使用这篇 React 导航文章和这篇关于 React 登录示例来学习。第一篇文章将所有代码放在其中，App.js而第二篇文章则将代码放在单独的页面中，但稍微过时了。所以我的计划是集成这两个示例，使用第一篇文章的代码，但在不同的页面中，而不是将所有内容都放在App.js.

我的项目结构

我得到的错误：

None of these files exist:
  * Screen\drawerScreens\settingsScreen(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * Screen\drawerScreens\settingsScreen\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
   6 |
   7 | import HomeScreen from './Screen/drawerScreens/HomeScreen';
>  8 | import SettingsScreen from './Screen/drawerScreens/settingsScreen';
     |                             ^

一些帮助和提示将不胜感激。如果需要更多信息，请告诉我。提前致谢。

我想将 React Navigation v5（抽屉式导航）与 Next.js 一起使用，但我对它们的集成有疑问。

简而言之：基于 React Navigation Screens 组件的 React Navigation（抽屉式导航）。它有条件地呈现正确的屏幕。

问题是： Next.js 有自己的基于文件夹结构的路由系统。例如。/pages 文件夹中的每个文件都会自动生成适当的路线，因此我无法将这些文件添加为 React 导航屏幕（至少我不确定这是否可能）

如何让这些工具协同工作并保存Next.js SSR功能？

React 导航抽屉示例：

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        onPress={() => navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    </View>
  );
}

function NotificationsScreen({ navigation }) { …

我正在使用 React-navigation 5 中的抽屉导航器。我需要将菜单（抽屉的默认）图标颜色更改为白色。

我找不到任何道具，或者可能是我错过了。有人可以帮忙解决这个问题吗？

这是我的堆栈导航器

这是我的抽屉导航器

问题是堆栈导航器屏幕 2 中的抽屉导航器标头 - [name='Details',component='Anote']，
我想从下图中删除抽屉导航器 [即。标题为[Notes Maker]]的一个

此问题的用例是让抽屉菜单（如“设置”）仅在“主屏幕”中可用。在“主屏幕”上可能有许多按钮链接到堆栈导航的其他屏幕，其中抽屉不可用。

主要问题是如何仅在 Stack Navigator 的特定屏幕上启用抽屉导航？在下面的示例中，抽屉在堆栈的所有页面上都可用。我尝试过gestureEnabled但没有成功：

  const StackHome = () => (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Example1" component={Example1} />
      <Stack.Screen name="Example2" component={Example2} />
    </Stack.Navigator>
  );
  <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={StackHome} />
      <Drawer.Screen name="Settings" component={Settings} />
  </Drawer.Navigator>

另一方面，如果我尝试将其作为屏幕Drawer之一Stack，那么我总是有相同的标题栏（例如“标题”）

我有一个使用 React Navigation 的 React Native 应用程序。该应用程序已经包含一个嵌套堆栈导航器的选项卡导航器。现在我还想在最顶层添加抽屉导航，显示自定义抽屉内容。

因此，我的层次结构将是 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>

现在我的问题是：当我从左向右滑动时，抽屉就会出现，只要我将手指放在屏幕上，我就可以看到我的自定义抽屉导航组件。每当我将手指从屏幕上移开时，抽屉式导航就会自动再次关闭。

此外，navigation.dispatch(DrawerActions.openDrawer())从 Stack Navigator 内的 Pressable 调用不会执行任何操作 - 抽屉根本不会打开。

...
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());
      }}>
...

有谁知道解决这个问题的办法吗？

非常感谢并致以最诚挚的问候智能家居制造商

PS：我的配置如下

"react": "17.0.2",
"react-native": …