问题标签 [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 投票
2 回答
1523 浏览

react-native - 如何在 DrawerNavigator 中确定活动路线以着色活动菜单项并关闭抽屉

我正在使用React Navigation库。我已经编写了一个自定义抽屉菜单并将其添加到我的导航器的contentComponent配置中。我不知道如何从自定义菜单中确定哪个页面/屏幕处于活动状态。这是我的DrawerNavigator代码:

值得注意的是,我的DrawerNavigator嵌套在StackNavigator中。我将导航选项导出到一个单独的文件,如下所示:

我像这样分配这些选项:

我的自定义 DrawerMenu 如下所示:

如果我选择不同的页面,我可以很好地导航(如果我在“搜索位置”页面上并且我想转到“登录”页面,一切都按预期工作)。但是,如果我在“搜索位置”页面上并单击“搜索位置”菜单项,我只想关闭抽屉。我还想为活动页面的图标/标签着色。我的问题是,从DrawerMenu.js文件中,我不知道如何确定我当前在哪个页面上执行此操作。

我是否正确执行此操作?我是 React Native 的新手。提前致谢。

0 投票
1 回答
52 浏览

reactjs - 使用 DrawerNavigator 时 this.props.navigation.goback() 无法正常工作

这个应用程序首先进入 A 的屏幕,然后是 B、C 和 D。然后在 D 中时,我应该按一个 Touchable Opacity 以重定向到 C,但它转到了 A。

然后,例如,当我尝试在屏幕 D 中使用this.props.navigation.goBack()时,它会转到 A 屏幕(列表中的第一个)。预计会进入C屏。

我搜索了解决方案,发现将 StackNavigator 与 DrawerNavigator 结合起来会是一个好主意,但我实际上不知道如何正确地做到这一点。

谢谢!

0 投票
2 回答
988 浏览

react-native - How to make an React DrawerNavigator item just be a clickable link

I want to make an item in my React-Native DrawerNavigation that is just a clickable link that opens the user's browser to a link.

Here is the main code:

File: /src/routes/AuthorizedNavigator.js

I've tried replacing [constants.patientAuthorizedRoutes.help]: "Help", with [constants.patientAuthorizedRoutes.help]: { screen: Linking.openURL('https://www.helplink.com') }

But this causes the app to start up with automatically opening the browser to that link first thing without the user doing anything.

I've also tried creating an whole separate component for "Help", which all it did was to trigger opening the browser to that link. This actually worked, BUT for some reason it can only be done once, if a user tried to click on "Help" a second time, they are just taken to a blank white screen. Here is that code:
Added to file /src/routes/AuthorizedNavigator.js:

File: patient-mobile/src/routes/HelpNavigator.js

File: shared/src/screens/Help/index.js

0 投票
3 回答
3974 浏览

react-native - 如何在 react-navigation-drawer 中将背景颜色更改为透明

在此处输入图像描述

大家好,我正在尝试在我的应用程序中添加 react-navigation-drawer,我正面临这个问题。每当我打开抽屉时,背景或背景都会变成不透明的黑色。我尝试添加背景颜色,但它对我不起作用。这是我的侧边栏代码:-

这是我的导航器,我在其中添加了 Drawernavigator。

如果有人知道解决方案,请检查此代码并帮助我。我想让背景透明。

提前致谢。

0 投票
1 回答
375 浏览

react-native - 升级到 react-navigation 4.x 后,StackActions 重置导致问题

我在 react-navigation 3.x 中有以下导航设置

在成功登录期间,我正在执行以下操作来重置

但是现在我升级到 react-navigation 4.x 但是当我运行上面的重置代码时它给了我异常。可能是什么问题?

0 投票
0 回答
269 浏览

javascript - 如何使反应导航抽屉永久打开

我想在 react-native 中制作一个类似 web 的侧边栏菜单。侧边栏可以永久打开,抽屉打开时可以访问应用程序主体

在此处输入图像描述

0 投票
1 回答
595 浏览

react-navigation - 如何在抽屉导航器中设置后退按钮?

我有一个DrawerNavigator作为我的应用程序的基本块。原因是它应该可以从所有屏幕访问。因此,它也是所有深层链接的目标,并且只会显示实际抽屉中的一些项目。

主页包含一个底部导航器的堆栈,更多条目本身也是堆栈。

问题是在抽屉中导航不会像在堆栈中导航那样显示任何后退按钮。拥有这些就好了,就像 Android 上的后退手势一样。

这是否存在,如果存在,应该如何解决?

0 投票
2 回答
683 浏览

react-native - 如何修改 DrawerNavigatorItems 项

在它的文档DrawerNavigatorItems具有以下属性:

  • items- 路由数组,可以修改或覆盖

它说你可以修改数组。

我怎样才能做到这一点?

它没有解释什么是“路线数组”。只是字符串?一个东西?

我想要做的一个例子是获取完整的数组并在最后添加一个额外的数组,例如

0 投票
2 回答
1457 浏览

react-native - 如何从抽屉导航器菜单导航到特定选项卡

从抽屉项目中按下时,我必须导航到特定选项卡。我搜索了很多,但找不到与我的问题有关的任何内容

我试图按照此导航操作链接,但无法找到如何实现它 从抽屉导航器导航到特定选项卡

当我按下抽屉菜单上的“Screen3”时,它应该导航到选项卡导航器中的“已接受”屏幕。当我按下抽屉菜单上的“Screen4”时,它应该导航到选项卡导航器中的“正在进行”屏幕。当我在抽屉菜单上按“Screen5”时,它应该导航到选项卡导航器中的“已完成”屏幕。有什么办法可以实现吗?谢谢

0 投票
1 回答
709 浏览

react-native - 在嵌套抽屉导航中反应当前屏幕的本机访问标题

我有一个使用 react-navigation 的 react native 应用程序,我希望我的标题看起来像这样,带有标题和副标题。

在此处输入图像描述

我正在使用基于本机的 Header 来实现这一点。在应用程序的根目录下,我有一个标签导航,每个标签都有自己的抽屉式导航。像下面 在此处输入图像描述

对于所有选项卡,都有单独的 Header 组件,其中的 Title 我已经硬编码。副标题应该是当前活动屏幕的标题,类似于导航选项中配置的drawerLabel或。title但我无法在我的标题组件中访问相同的内容。我什至将navigation作为道具传递给标题,但它包含选项卡作为活动路线,而不是抽屉的初始路线作为活动路线。这就是我使用标题组件的方式

下面是我的抽屉配置

我有事件尝试为每个屏幕创建堆栈并具有默认标题,但我无法通过传入文档说应该工作的自定义标题组件来自定义它。

以下是我的依赖项

任何帮助将不胜感激。