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

react-native - 如何将登录凭据传递到 React Native 中导航抽屉的 DrawerMenu 的初始屏幕?

我在我的应用程序中创建了 React-navigation Drawer V3。我面临在抽屉导航堆栈的“主页”屏幕的初始屏幕上获取登录凭据的问题。尽管我在以下帮助下从 Login.js 传递了 DrawerMenu.js 上的数据:

并通过以下方式获取 DrawerMenu.js 上的数据:

但是我需要将这些数据获取到我无法获取的 Home.js。将数据获取到 DrawerMenu.js 的原因是因为堆栈中还有其他几个屏幕需要登录数据,并且他们能够使用抽屉内容组件中使用的 screenProps 来获取它,但由于 Home 是初始屏幕,所以没有办法它第一次接收数据,只有 DrawerMenu.js 文件最初接收它。有人可以帮我解决这个问题吗?

这是我的带有导航堆栈的 DrawerMenu 代码。

我在用 :

0 投票
1 回答
7817 浏览

javascript - 在本机反应中在哪里调用 addListener

我们正在开发 React Native 项目。在那,我们在其中显示标签栏,也显示侧边栏。所以,对于那个侧边栏,我们添加了 react-navigation 库。但是,在 Android 中,如果用户点击该设备的后退按钮,如果抽屉打开,我们必须关闭它。

因此,我们将 addListener 添加到componentDidMount()并删除它componentWillUnmount()

但是,问题是,如果我切换到另一个选项卡并返回上一个选项卡,并且如果我们点击设备后退按钮,则会删除由于侦听器而未调用的后退按钮处理程序。

一旦我们切换到上一个屏幕,是否有任何替代方法将始终调用。

我们知道,componentDidMount 只会在该屏幕启动时调用一次。

我们知道我们可以调用 render 方法,但是,我们希望通过良好的实践来调用它。

有没有办法让它成为全局方式而不是编写调用关闭抽屉的类。

代码:

有什么建议么?

0 投票
1 回答
183 浏览

react-navigation - 如何在嵌套的抽屉/堆栈导航中包含 menuIcon 以切换抽屉导航器?

我有一个抽屉导航器,里面有 2 个堆栈。我希望每个堆栈的第一个屏幕在标题中显示汉堡包图标,但是当移动到堆栈中的第二个屏幕时,我希望将汉堡包替换为后退按钮。

如何将抽屉连接到此切换按钮并使其仅显示在堆栈中的第一个屏幕上?

在编辑堆栈中的第一个屏幕以包含切换按钮时,我没有得到任何响应。我遵循了详细的过程

将汉堡按钮添加到 React Native Navigation

这是我最好的尝试:

/ --------------屏幕--------------- /

/ ---------------堆栈导航器------------- /

/ --------------- 抽屉导航器------------- /

0 投票
1 回答
787 浏览

reactjs - 在 react-native 中从 StackNavigator 返回组件的问题。得到一个空白屏幕,但 cosole.log 没问题

我想要做的是在我的应用程序的最顶部包装一个名为 MainNavigator 的切换导航器,它重定向到一个 LoadingScreen,它确定用户是否已记录并导航到 AuthNavigator 或 AppNavigator。AuthNavigator 自己是一个 stackNavigator,他显示屏幕“LoginScreen”或“SignUpScreen”。AppNavigator 是具有多个屏幕(配置文件、主页...)的 DrawerNavigator。

我遇到的问题是返回方法似乎有效,因为我可以从“LoginScreen”组件看到控制台中的日志,但在屏幕上,唯一的返回是白屏。当我直接调用我的“LoginScreen”时使用 LoadingScreen 组件中的组件:

我在我的设备上呈现了 LoginScreen 组件。

我知道问题来自我的 AuthNavigator 和 AppNavigator,因为我可以从 AuthLoading 或 MainNavigator 返回屏幕组件这里有一些代码:

验证加载:

认证导航器:

登录屏幕:

我找不到错误,但我知道它来自 AuthNavigator 和 AppNavigator。如果我将 AuthLoading 路由设置为在控制台中呈现 App 但屏幕上没有任何内容,我可以看到“登录屏幕”或“应用屏幕”,当我在 MainNavigator 中启动新路由 LoginScreen 并从 AuthLoading 导航到该路由时作品,我的屏幕上显示了一个漂亮的文字。

我知道这可能是一个微不足道的错误,但我花了几个小时自己解决这个问题并且找不到,所以如果有人可以帮助我,那就太好了!

提前感谢!

0 投票
0 回答
190 浏览

react-native - createBottomTabNavigator里面如何实现createDrawerNavigator

我正在开发一个应用程序,我在主屏幕上提供了一个底部选项卡。我已经成功实现了导航到多个屏幕的底部导航。但是,我想从底部标签之一打开一个侧抽屉。

这是我到目前为止所做的:

我面临的问题是当我触摸打开抽屉时,整个抽屉上的视图打开,它看起来不像抽屉,看起来更像是没有标题的屏幕。

我在这里做错了什么?

0 投票
1 回答
1034 浏览

react-native - 设置 createDrawerNavigator 屏幕标题反应原生

我有以下代码库

但是标题没有显示在标题上,它是空白的

我也试过在每个屏幕上设置标题

但这不起作用,我需要改变什么才能使它起作用,

请指教。谢谢

0 投票
2 回答
1027 浏览

react-native - React native - onpress 在抽屉导航标题中不起作用

我正在尝试在我的反应原生应用程序的导航标题内添加一个自定义菜单图标按钮。我成功地做到了,但只要图标在标题中,新闻事件就不会触发。例如,如果我在这里有图标:

https://www.dropbox.com/s/xyah9ei43wgt1ut/menu_regular.png?dl=0

新闻发布会不起作用,但如果我在这里(将其移低):

https://www.dropbox.com/s/54utpr1efb3o0lm/menu_moved.png?dl=0

事件触发正常。

这是我当前的设置导航器:

屏幕截图中的图标在里面headerLeft。我也尝试了各种 zIndex 值,但没有运气。

提前致谢!

编辑:

抽屉在第一个项目上存在相同的问题,当它在标题上方时,按下事件不适用于抽屉项目的整个区域:

https://www.dropbox.com/s/krva5cgp7s59d13/drawer_opened.png?dl=0

0 投票
0 回答
622 浏览

ios - react-navigation 正在 iOS 模拟器上工作,但在 iOS 真实设备上面临导航问题

react - 导航适用于 iOS 和 android 模拟器以及 android 真实设备,但不适用于 iOS 真实设备

我正在使用堆栈导航器,在堆栈导航器内使用抽屉导航器和选项卡导航器,但在运行项目时,它正在 iOS 和 android 模拟器和 android 真实设备上工作,但在 iOS 真实设备上不工作

我正在使用“反应导航”:“^3.9.1”

0 投票
1 回答
407 浏览

android - 抽屉导航未在反应导航中显示

我正在使用 react-navigation 3 版本和 react native 0.59 版本。我正在为登录代码使用切换导航。一旦我登录,它就会重定向到主屏幕,并且从主屏幕进行其他导航工作正常,但抽屉图标不显示。

我的 navigator.js

0 投票
2 回答
1758 浏览

react-native - 反应导航 - TabNavigator-> StackNavigator 中标题菜单图标的 DrawerNavigator

我想在所有屏幕中全局显示 HeaderLeft 菜单图标。当我点击菜单图标时,我需要显示抽屉菜单。我使用“OpenDrawer”、“CloseDrawer”方法来打开/关闭抽屉菜单。

但我总是得到“ undefined is not a function (evaluating 'props.navigation.openDrawer()')"。我也尝试了以下

但以上都没有奏效。这是我的部分代码