问题标签 [react-navigation-stack]

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 回答
610 浏览

javascript - 如何根据 API 调用渲染反应导航抽屉配置

我正在尝试设置反应导航,并且想法是具有这样的结构:

我将用于构建抽屉导航器配置的不同类别将来自一个 API,我的计划是从顶部开关导航器中 LoadingScreen 中的 API 获取。

我正在努力弄清楚如何将这些数据放到正确的位置来构建抽屉导航器。我最初尝试将 BottomTabBar 中的“主页”路由作为屏幕组件,然后我可以将 API 结果传递到该屏幕,构建抽屉配置,然后手动返回抽屉导航器,这就是堆栈溢出的答案所指的内容我认为:堆栈溢出答案但是我得到一个不变的错误,即没有可用的导航道具。

所以我想我的问题是如何根据我将在切换导航器加载屏幕中获取的数据构建抽屉导航器?

0 投票
3 回答
12373 浏览

react-native - How to set a default screen Route in react Tab Navigation in React Native

I want to load dashboard to be active tab in react Native bottom tab. Navigation whenever dashboard is loaded but whenever I move to dashboard it moves to inbox screen which is the first element in my react Bottom Tab Navigation. Is there any way to create a default screen whenever screen bottom tabs is used?

The code I am using for bottom navigation is

Even though the navigation works completely fine I just need a way to load dashboard screen whenever the user navigates to Dashboard.

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 回答
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 投票
1 回答
1013 浏览

react-native - 右侧的 React Native 导航标题按钮无法正常工作

我正在使用 React Native 开发一个移动应用程序。我正在使用 React 导航,https: //reactnavigation.org/进行导航。但是我在将按钮嵌入操作栏或工具栏或导航栏或任何您想要调用的内容时遇到问题。但它不起作用。

正如您在我的代码中看到的那样,我正在更改标题并像这样在右侧添加按钮。

但它只是更改标题,而不是添加右侧的按钮,如下面的屏幕截图所示。

在此处输入图像描述

为什么右侧没有添加按钮?

0 投票
1 回答
537 浏览

android - 更新 React-native 后远程调试时反应导航变慢

我正在开发一个 react-native 移动应用程序,主要用于 android 平台。我最近需要为 react-native-firebase 升级 react native 版本。React-native 版本是0.57.2. 我升级到0.59.6使用rn-diff-purge。这样做时,我需要将 react-navigation 版本从2.17.0to更新3.8.1(但类型版本@types/react-navigation": "^2.0.23"如您所见,我不知道这是否有区别)

升级后,唯一头疼的就是react-navigation。我解决了一些问题。但毕竟,当我远程启用 debug-js 时,导航转换变得非常缓慢。尤其是this.props.navigation.goBack();电话。我尝试给出组件的名称this.props.navigation.navigate("SomeRouter");,但我猜是关于组件已经安装的问题。

为什么会这样?减速的原因可能是什么?我该如何调试呢?顺便说一句,当远程调试js被禁用时,没有问题,当远程调试js被启用时,transitions变成了一场灾难!

这是一个示例组件:

这是 App.tsx:

这是旧的 package.json:

这是我的新 package.json:

0 投票
1 回答
1036 浏览

react-native - 在 React 或 React Native 中,将颜色设置为 SVG

你可以为 SVG 设置一个通常采用十六进制颜色的道具吗?在 React Navigation 中,活动背景(选项卡图标/文本后面的选项卡颜色)需要是 SVG,而不是像这样的十六进制颜色:

0 投票
2 回答
2543 浏览

react-native - 标题不适用于 react-navigation createStackNavigator

我在我的应用程序中使用createStackNavigatorinside createBottomTabNavigatorreact-navigation我想在我的屏幕上有一个标题。在React Navigation 的教程之后,我以这种方式实现了它:

但是,导航栏中不显示任何内容。我也试过headerTitle了,虽然没有用。

我究竟做错了什么?

0 投票
0 回答
81 浏览

react-native - 嵌套导航 SwitchNavigator>DrawerNavigator>TabsNavigator>StackNavigator

我有用于登录的 SwitchNavigator

在 Switchnavigator 之后它重定向到 Drawernavigator。

在 Drawernavigator 的主组件中,我有 Tabnavigator

现在,在屏幕上的选项卡组件上,我想进入一个应该从 Drawernavigator 出来的屏幕,在那里我可以弹回 Drawernavigator 的 Tabnavigator。如何做到这一点?在 Drawernavigator 的主组件内,我有一个按钮。单击时我想转到一个应该从 Drawernavigator 出来的屏幕,我可以在该屏幕上弹回 Drawernavigator 的 Tabnavigator。

如何做到这一点?