问题标签 [react-navigation-drawer]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
64 浏览

react-navigation - 抽屉不再按手势打开(升级到 react-navigation 3)

我将 react-navigation 从 v2.18 升级到刚刚发布的 v3.0.0。不幸的是,抽屉菜单不再按手势打开。我安装并react-native link编辑了react-native-gesture-handler库。相反,我可以通过 open() API 打开抽屉。

似乎所有内容都已加载,但手势无法识别或未处理。有什么提示吗?

0 投票
0 回答
41 浏览

javascript - 将配置文件数据发送到抽屉导航器

我有一个自定义抽屉导航器,它在顶部显示一些个人资料信息。我可以从抽屉中的服务器加载配置文件图像,但这似乎没有必要,因为我还将在其他地方加载配置文件信息(登录后立即)。如何从不同的组件将此配置文件信息获取到我的导航器中?

0 投票
1 回答
722 浏览

react-native - React-navigation 抽屉在渲染项目屏幕后立即将我路由回上一个屏幕

我有一个这样的 StackNavigation:

使用嵌套在里面的 DrawerNavigator:

堆栈导航器的初始路由工作正常

登录 -> 主页

但是当我尝试从主页导航到收藏夹时,它会在呈现收藏夹屏幕后立即导航回主页。

我正在使用 react-navigation@2.11.2 和 react-native@0.56.0

0 投票
0 回答
146 浏览

android - 在 DrawerNavigator 的子项之间传递 React-Native 的 props/params

我的 DrawerNavigator 设置是这样的

导航器本身是 StackNavigator 的子代。

现在,问题是如何在 Home 和 Profile 之间传递 props/param?

欢迎任何阅读推荐和 StackOverflow 答案,但我没有找到类似的东西

另外,我只从抽屉中访问个人资料。

redux 是这里唯一的方法吗?

0 投票
0 回答
122 浏览

react-native - 当我导航到另一个 BottomTabNavigator 时,如何确保完全删除抽屉导航?

我有一个 BottomTabNavigator ,其中包含另一个 BottomTabNavigator 和两个 DrawerNavigator 。

DrawerNavigators 之一表示经过身份验证的状态。我刚刚在此抽屉导航中实现了一个注销按钮。该按钮清除 redux 状态并导航到 BottomTabNavigator,更具体地说,导航到 Welcome 导航器的 Login 路由。

但是,一旦在注销后的 Welcome Navigato 中,当我尝试导航到 BottomTabNavigator 的另一条路线时,就会出现经过身份验证的 Drawer。

我不确定为什么会这样。当我刷新 expo 项目时,我意识到该应用程序确实处于未经身份验证的状态。

有没有办法确保在我注销时不会出现 Authenticated Drawer Navigator?

这是我的主要导航器:

0 投票
0 回答
554 浏览

reactjs - 用户登录页面后根据用户类型准备抽屉导航菜单

我们正在使用 createSwitchNavigator 为我们的应用程序创建 AppStack 和 Auth Stack

我们的开关组件看起来像

在 shell 中,我们正在创建动态抽屉菜单。初始应用程序将在我们有登录表单和忘记密码的地方加载 Auth Stack。

由于我们在 js 加载的 Header 中导入了 ShellForm,它会触发所有 const 变量并尝试获取菜单。

我们的外壳形式看起来像

由于 DrawerNav 是一个 const 变量,它试图准备菜单有没有办法实现这一点并避免预先加载。

有什么方法可以在登录完成后才开始呈现 ShellForm。

0 投票
1 回答
817 浏览

android - react-navigation 组成多个导航

想象一下,我的应用程序中有三个状态:

  1. 设置
  2. 留言

我想在屏幕底部显示指向这些状态的前两个链接,我可以使用以下代码实现:

我将它导出为我的根组件:

现在我想显示第三个链接,抽屉导航中的消息,我看到人们使用以下代码执行此操作:

和此代码的抽屉导航器:

我的问题是,我是否应该始终在主堆栈导航器中包含选项卡导航和抽屉导航作为屏幕?

和抽屉导航器的相同问题,我应该在我的抽屉导航器中包含我的标签导航器吗?

我的参考链接是这样的:

https://github.com/quangvietntd/AppBanHangReactNative/blob/master/App.js

0 投票
1 回答
1458 浏览

android - React Native:- 滑动手势不适用于 react-navigation 的抽屉导航器

我是本地人的新手,我正在尝试制作具有两个选项卡和一个抽屉的屏幕。为此,我在 createDrawerNavigator 中使用 createTabnavigator,在 createStackNavigator 中使用这个 createDrawerNavigator。我已启用 swipeEnable 但滑动手势仍然不适用于抽屉,但标签工作正常。请帮助我找到一种方法来完成这项工作。

这里是createDrawernavigator 的设置。

应用程序.js

0 投票
1 回答
1251 浏览

javascript - 如何在 React-Native 中创建 Action-Sheet/Bottom-Sheet 样式的抽屉?

我想要一些关于如何在 React-Native 中创建操作表/底部表样式抽屉的指导,以便我可以为 iOS 和 Android 使用单个代码库。

我尝试使用动画 Spring API。但是,我无法将弹簧的位置从原始位置(抽屉关闭时)更改为顶部位置(抽屉打开时)。因此,如果用户没有完成手势,菜单会在任一状态下返回到其原始位置,而不是底部的原始位置。

此外,许多其他类似问题的答案都建议使用他们自己的或 GitHub/NPM 上的其他包。

我想自己制作以保持较小的依赖关系。我也考虑过使用 React-Navigation,但我似乎找不到任何适合我用例的东西。

0 投票
1 回答
2996 浏览

react-native - createStackNavigator 中的 CreateDrawerNavigator

我的问题是:我似乎无法在左侧添加汉堡包按钮(切换抽屉),而且我无法根据屏幕向抽屉添加标题(例如,显示“登录”登录屏幕上的标题)。

代码简要说明:

AppNavigation.js处理应用程序的所有导航。包括两个抽屉(LoggedDrawerUnloggedDrawer)。

它们位于堆栈导航器 ( RootNavigator) 内,并且RootNavigator位于容器内 (react-navigation 3.0)。

这是我的代码:

应用导航.js

初始化.js

在我的屏幕上,我有一个导航选项,就像这样(唯一的区别是图标),这只是代码的一部分,只是作为一个例子:

所以我想做的是:

1.在所有屏幕的标题中添加一个汉堡图标,用于切换抽屉

2.在标题中间添加标题(也适用于所有屏幕)

我试过的:

  • 我在互联网上可以找到的所有东西似乎都没有用。

另外,如果我的架构是错误的,请指出,如果也有不同的方式来实现我想要做的事情,它也被接受。

提前致谢。请帮忙。