问题标签 [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 回答
125 浏览

javascript - 无法在 React 导航中呈现抽屉导航?

嗨有一个反应导航方法,它可以在 createSwitchNavigator 中创建一个抽屉。但是在进行最后一次调用时,我无法正确渲染抽屉。我正进入(状态

不变的违反错误来了。

这是我的堆栈导航器

这是我的仪表板组件

我收到 Element type is invalid 错误。检查仪表板屏幕的渲染方法。我究竟做错了什么?

0 投票
1 回答
730 浏览

reactjs - 嵌套选项卡导航器在抽屉导航器中不起作用

我正在尝试将选项卡导航器嵌入抽屉导航器中,但抽屉导航器有时会停止工作。代码:https ://github.com/myplaceonline/testreactexpo/tree/drawernestedtabs

要重现问题:

  1. 单击底部的 Screen2 选项卡
  2. 打开抽屉
  3. 点击首页
  4. 打开抽屉
  5. 点击屏幕2
  6. 什么都没发生

有没有更好的方法来做到这一点并保持抽屉和底部标签同步并避免抽屉停止工作的问题?

0 投票
0 回答
48 浏览

react-native - 对窄屏使用 react-navigation 抽屉,对宽屏使用侧边菜单?

我希望我的 react-native 应用程序在窄屏幕上使用抽屉,但在宽屏幕上有一个粘性侧边菜单。我正在使用 react-navigation,我可以使用这个来制作菜单:

但是,这会将编辑区域显示为不可编辑,在抽屉打开的情况下向右滑动。

我正在寻找有关如何解决此问题的建议,不一定是代码修复(尽管欢迎提供示例!)。反应导航甚至可能吗?

0 投票
1 回答
1222 浏览

react-native - 为 DrawerNavigator 的自定义 contentComponent 添加填充以避免覆盖状态栏

当使用基本的 DrawerNavigator 时,有适当的 paddingTop 可以避免在状态栏上覆盖内容;但是,当添加自定义 contentComponent 时,填充不存在。代码:https ://github.com/myplaceonline/testreactexpo/tree/drawermargin

在 Android 上没有自定义 contentComponent:

没有自定义 contentComponent

在 Android 上使用自定义 contentComponent:

使用自定义内容组件

我可以添加一些明确的边距,但我应该选择什么值?我已经在使用SafeAreaView,但我相信这仅适用于 iOS。

这是代码。注释该contentComponent: CustomDrawerContentComponent,行以查看工作视图。

0 投票
0 回答
67 浏览

react-native - 需要使用 react navigator 执行 Flux Authentication,但我只需要对某些屏幕进行授权

你好!当我启动我的应用程序时,我需要在没有身份验证的情况下进入主页。之后,我有一个 DrawerNavigator 调度调度以下屏幕:

  • 帐户(需要身份验证)
  • 商店(需要授权)

我的导航背景:

我使用 createDrawerNavigator 作为主要导航来调度:

代码:

当我去 Account 或 Shops SwitchNavigator 调用 AuthLoading 屏幕作为这个文档https://reactnavigation.org/docs/en/authflow.html

我的 AuthLoading 会从 Drawer 中获取一个参数来发送,如果我是 auth 到好屏幕或 Auth Stack


让我们尝试登录和注销:

如果我不是 auth 我去登录屏幕并返回到我的初始目标屏幕(例如商店),那么我的 switchNavigator 现在是 Mount,太棒了!

现在总是在我的商店屏幕上注销没关系我重定向到登录屏幕但是如果我去帐户屏幕我仍然登录因为我的堆栈总是挂载所以我没有传递给我的 initalRoute (AuthLoading) 来检查我是否'am auth or no。所以我也必须在我的帐户屏幕中注销!

问题与其他方式相同:现在我在商店屏幕和帐户屏幕中注销。如果我登录商店屏幕,我会进入商店屏幕,但现在如果我进入帐户屏幕,我仍然在我的登录屏幕中。


我的 AuthLoading 文件:

我的路由器文件:

0 投票
1 回答
2086 浏览

react-native - 如何在反应导航中更改抽屉导航中的背景颜色

我需要更改抽屉屏幕的背景颜色。我正在使用反应导航。是否可以选择更改此颜色?参考附图。

在此处输入图像描述

0 投票
1 回答
230 浏览

javascript - 如何从“contentComponent”中获取构造函数中的“this.state.userName”以放置在反应导航中抽屉的标题部分?

我在从 AsyncStorage 获得的构造函数中有一个变量“this.state.userName”,它在构造函数中记录完美。我希望它呈现在反应导航的导航抽屉的标题中。因为我是 react-native 的新手,所以我对流程感到非常困惑。我已经浪费了一整天。标题上的结果为 null 或没有显示任何文本,也没有任何错误。

'this.setState.userName' 的 setState 的回调:06-15 00:40:22.211 20510 29463 I ReactNativeJS: { userName: 'Ramesh mike' }

我尝试了以下结构:

0 投票
1 回答
1048 浏览

react-native - 在反应导航中打开抽屉时如何移动tabBar

我在我的应用程序中都使用了 TabNavigator 和 DrawerNavigator。

当我使用“滑动”选项打开抽屉时,内容会随抽屉滑动,但 TabBar 不会一起滑动。

在此处输入图像描述

我想让 TabBar 一起滑动,但我找不到任何选项。

我怎样才能做到这一点?你能帮忙吗?

- - - - - - -[代码] - - - - - - - -

1) 应用程序.js

2)tabBar.js

3) SlideMenu.js

4) 带抽屉的屏幕

0 投票
2 回答
6208 浏览

react-native - 反应原生导航到具有不同道具的同一页面

我正在开发一个使用侧抽屉的 RN 应用程序。(RN 版本:0.59.8)

使用的 react-navigation 版本是 3.11.0。在菜单中,多个子项指向同一个页面,一个 ViewPager,但具有不同的参数(页面索引)。问题是以下都不起作用:

  1. 尝试使用推送而不是导航(返回_this2.props.navigation.push is not a function
  2. 试图重置相应的堆栈。

(也尝试过key: null

任何帮助深表感谢!

0 投票
1 回答
1101 浏览

react-native - React Navigation Drawer contentComponent 与屏幕通信

我将 React Navigation Drawer 与自定义内容组件一起使用。下面是我创建抽屉导航的代码:

在 DrawerContent 中,我创建了组件,其中包含更多项目。

在我的 onClickDrawerItems 函数中,如何将调用发送回 MianScreen 以显示注销对话框