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

javascript - 如何确保我的所有 React Navigation 路线都具有完全相同的动画?

我已经使用 React Native 0.59 设置了一些动画路线,react-native-navigation并且我想知道我可以做些什么来确保每条路线的动画都完全相同,而不管路线堆栈如何。

我已经修改过,StackActions.reset()但它只会对我的应用程序的性能产生负面影响,并且将动画作为一个整体移除,所以我选择不使用它。我想我可能缺少一些代码,或者我可能需要彻底检查我的整个路由系统。

我已经包含了一些我正在使用的代码:

这是我的完整NavigationManager.js课程:

这是我在SwitchBoard.js课堂上的实现:

我的Screen课程由基本的扩展 React NativeComponent课程组成。

单击返回初始路由(在此示例中为PortfolioScreen路由)时的动画会遍历堆栈中的所有路由,并且在动画中可见。

这是显示错误的 .gif 图像。这是我按下的最后一个按钮(在红色屏幕之后),它重置堆栈并以一种奇怪的方式设置动画。

动画

先感谢您。

0 投票
2 回答
7922 浏览

react-native - 如何在抽屉导航器内的堆栈导航器中通过 backButton 返回

我有多个屏幕,每个屏幕都是 stackNavigator。任何创建的 stackNavigator 都在抽屉内。在每个屏幕中,当按下 stackNavigator 标题的 BackButton 时,屏幕总是导航到 initialRoute 而不是回到最后一个屏幕。

我测试了navigation.goBack()and navigation.goBack(null)and and navigation.goBack()andnavigation.goBack(this.props.navigation.state.key)}

但这些都不起作用。这是我的代码:

我有多个屏幕导航器,例如菜单导航器:“加载”、“主页”、...屏幕。在继续我有抽屉导航器:

然后我创建了drawerNavigator:

0 投票
0 回答
65 浏览

react-native - 我在这个堆栈导航器上做错了什么?

我正在尝试通过使用 Firebase 作为后端构建一个新应用程序来自学 react-native。目前,我正试图在我添加内容之前了解 react-navigation 导航器以在我的应用程序上布置屏幕。

我遇到的问题是堆栈导航器无法导航。它呈现下一个屏幕,并将其添加到页面,然后启动转换 - 但无论出于何种原因,转换都不会发生。所以会触发以下事件:* willBlur (on the originating screen) *onTransitionStart`(在堆栈转换上)

我假设我做错了什么,所以我重写了三四次,最后一次我把它归结为问题的最简单的迭代,只有一个堆栈导航器和两个屏幕 - 我我遇到了同样的问题。我已经浏览了几次文档,我认为在这一点上我只是一个大白痴。

这是我展示它的整个应用程序

我的 package.json 有以下内容:

目前这只是显示“主”屏幕,而不是导航到“列表”屏幕。按钮也停止响应,所以看起来事情开始工作但由于某种我无法解释的原因从未完成。

0 投票
2 回答
1153 浏览

react-native - Facebook 登录后无法让 React 本机应用导航到主屏幕

我正在制作一个反应本机应用程序,其中用户使用 Facebook 登录,然后使用该应用程序的更多详细信息进入他们的主页,并且在成功登录 Facebook 后,我无法让该应用程序导航到主页。

我正在使用反应导航器。我一直在搜索 Stackoverflow 3 天没有运气...

任何帮助,将不胜感激

在此处输入图像描述

在此处输入图像描述

如上所示,使用常规按钮时主页成功导航,但在 facebook 身份验证后不会

这是我的 App.Js

0 投票
1 回答
95 浏览

react-native - React Native 导航结构

带有 5 个选项卡的选项卡栏。

每个选项卡都是一个项目列表,比如 IndexScreen。单击该项目时,它会移动到一个新屏幕,例如 SingleItemScreen 在此屏幕中将有一个相关项目的部分,单击它会移动到具有不同参数数据的相同 SingleItemScreen。

相同的重复到其他选项卡。

我被困在一个星期的导航结构中。我想不通。

任何帮助表示赞赏。谢谢。

0 投票
2 回答
622 浏览

react-native - 如何根据从 API 获取的数据在 React Navigation 中创建或删除选项卡?

假设有一个选项卡视图,其中包含名称为面包、比萨饼、饮料、甜点、奶昔的选项卡。这些选项卡的名称是从 API 中获取的。此外,每个选项卡在各自屏幕上显示的信息也是从 API 中获取的。现在,当 Tab 的数据之一从 API 中删除时。我也希望将其从选项卡视图中删除。

如何在 React Navigation 中实现这一点?

0 投票
1 回答
559 浏览

javascript - 处理导航以提醒未保存的更改

我正在使用 react-navigation 中的 defaultGetStateForAction 来拦截我的导航,这样我就可以提醒我的用户有未保存的数据,并让他选择继续导航并删除未保存的数据或先保存它。此数据存储在更高的组件状态中,可以通过 screenProps 可用的函数访问该状态

所以......这是我的代码:

0 投票
2 回答
5613 浏览

javascript - 退出抽屉内的子堆栈导航器时,如何使用 react-navigation 转到 initialRoute?

我用 react-native、expo 和 react-navigation 构建了一个应用程序。我有一个主抽屉导航器,其中有 2 个其他堆栈导航器。一个堆栈导航器有 2 页;Products和产品。当我点击页面中的一个产品时Products,它会进入Product页面。Ben 如果我单击抽屉导航器中的另一个链接,我希望产品页面的堆栈导航器在离开堆栈导航器时返回到它的初始路由。

当我退出堆栈导航器时,我尝试设置初始状态,当我单击抽屉导航器中的导航器链接时,它会呈现初始状态,但是当我在子页面中并退出导航器时它不起作用。当我在抽屉中再次单击时,它没有Products导航到Products页面,而是停留在Product.

我可以在我的抽屉导航器中创建静态链接并使用this.props.navigation.navigate总是去this.props.navigation.navigate('Products'),但这将是我想要的最后一件事。我真的很喜欢我的抽屉导航器与我传递给它的东西保持动态。

this.props.navigation.navigate当生命周期继续时,我尝试过componentWillUnmount,但没有奏效。

我怎样才能做到这一点?

谢谢您的帮助!

0 投票
2 回答
465 浏览

react-native - 如何将屏幕从一个文件切换到另一个文件

我对本机反应很新,所以请仔细解释。我有 3 个文件App.js SplashAndLogin.jsRegister.js我能够从初始屏幕进入注册屏幕,并在我的注册组件之间来回切换文件,但是当它返回登录屏幕时,我似乎总是遇到同样的错误。

我尝试了几种不同的方法,但它们都一直给我同样的错误。我开始认为我设置文件的方式是错误的。

所以总结一下,我可以进入每个屏幕,除非我在 Register.js 文件上并尝试导航到HomeScreen它会抛出错误

“路由'HomeScreen'的组件必须是一个反应组件例如......”

0 投票
1 回答
51 浏览

react-native - 如何使用 react-navigation 在选项卡导航器中重置其他堆栈导航器

这是我的导航结构。

在堆栈导航 D 的某处,我想重置堆栈导航 A、B 和 C 的堆栈,但我不想将用户导航离开堆栈导航 D 上的当前屏幕。

我一直在研究 StackActions.reset,并了解我将如何使用它来重置和导航到特定堆栈,但是我将如何使用它(或以其他方式完成)我在上面的场景中描述的内容?