问题标签 [react-navigation-v5]

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

react-native - 使用 React 导航 5 将值从一个函数传递到另一个函数

我想将值“Hello”从 App.js 传递给 screen1.js。小吃:https ://snack.expo.io/@mobshed/passing-data-between-functions

谢谢您的帮助!

应用程序.js

screen1.js

0 投票
0 回答
164 浏览

react-native - 结合 BottomTabNavigator 和 StackNavigator [React Navigation v5 / Android]

我有一个标签栏,我想制作它,以便在按下其中一个标签时,它将屏幕推送到堆栈上(覆盖标签栏)。它基本上是 StackNavigator 和 BottomTabNavigator 的组合。我试过这个,但它给了我一个错误,说“导航”是未定义的。

应用程序.js

导航栏.js

0 投票
0 回答
58 浏览

javascript - React navigation sends the user to the initial route, instead of the sign-in route when authentication fails

I have an app that has a LandingScreen as the initial route. If a user wants to sign-in, they have to navigate from LandingScreen to SignInScreen. If a user presses the sign-in button I set isAuthenticating to true which shows a loading view. The problem is that if authentication fails, e.g when the user enters the wrong email or password it goes back to the LandingScreen instead of the SignInScreen after loading.

Authentication Stack:

When isAuthenticating is true:

Sign in function:

0 投票
3 回答
281 浏览

react-navigation - React Navigation v5 中的空屏幕?

在 React 导航 v4 中,我们像这样传递空屏幕:

但是如何在反应导航 5 中做到这一点?

0 投票
3 回答
2854 浏览

react-native - 如何使用底部标签导航处理 SafeArea 的背景颜色?

当前行为

大家好,

我想为底部选项卡设置背景颜色。所以我做了如下。

https://user-images.githubusercontent.com/6939811/76062160-b6dfde00-5fb7-11ea-8808-3f2562e90c24.png

问题是 SafeArea 有白色背景

预期行为

我期望的是 https://user-images.githubusercontent.com/6939811/76062716-cca1d300-5fb8-11ea-926a-acbd42d412dd.png

那么你能告诉我如何在 React Navigation 版本 5 中解决这个问题吗?谢谢!

你的环境

iOS 反应原生:0.61.5

@react-navigation/native: ^5.0.5

@react-navigation/底部标签:^5.0.5

0 投票
1 回答
628 浏览

reactjs - React Native:使用反应导航时如何使应用程序的上下文可用到屏幕?

我是 RN 新手并尝试创建一个登录系统,我将电子邮件和密码(为了代码简洁而隐藏)存储在全局范围内,以便使用组件调用服务器,在简而言之,我试图将电子邮件保持在应用程序级别,并避免从一个屏幕传递到另一个屏幕。

还有 HomeScreen 和 LoginForm 组件,它是 App 组件的孙子(我将在其中设置令牌):

但是我收到消息: AuthenticationContext 未定义

0 投票
0 回答
1157 浏览

react-native - 在 React Native 的 ScrollView 中滚动时动画导航标题不透明度?

我需要你对 React native 动画的帮助。在我的屏幕上,我想在向上滚动时将导航标题的不透明度从 0 更改为 1。

这是Snack中的代码

我像这样在 HomeScreen 中声明动画值。

在 Homescreen.js 中

为什么我使用“导出”是在导航标题中使用动画值

在 HomeStackNavigator.js 文件中

HomeScreen 中的另一个动画有效。但是动画在导航标题中不起作用。我怎样才能做到这一点?我错过了什么?导出动画值(translationY)有问题吗?

0 投票
1 回答
2097 浏览

javascript - 带有模态屏幕的堆栈中的嵌套选项卡栏(React Navigation v5)

我现在正在使用react-navigationv5。我有带有 3 个屏幕的 Tab 导航器'Home', 'Discover', 'Profile'. 我需要以这样的方式进行导航,我可以在选项卡导航器的顶部完全显示模态屏幕。在文档中,我没有找到如何从选项卡导航器进行操作。所以我打算将 Tab navigator 嵌套在 Stack navigator 中。现在我有很多问题需要解决:

  1. 我如何在嵌套在堆栈内的选项卡导航器中显示每个选项卡的标题。

  2. 从“主页”内的视图显示模式屏幕。

  3. 因为我在 v5 之前使用 typescript,所以我使用 v4 和 NavigationInjectedProps. 我可以毫无问题地访问“主页”内的嵌套组件,但现在我有未定义的props.navigation

MainNavigator.tsx

主屏幕.tsx

StreamsScreen.tsx

UPADE:我解决了导航问题,我没有用打字稿实现导航的所有逻辑......

应该做这样的事情:

在 HomeScreen.tsx 中:

现在剩下的问题是模式屏幕显示标题,即使在根堆栈导航器中的 setup mode='modal' 之后,即使我从文档中的演示复制粘贴的代码。 在此处输入图像描述 在此处输入图像描述

0 投票
0 回答
1393 浏览

react-native - 使用 react-navigation 5.0.5 的身份验证流程问题

实际行为:

我正在为一个项目实施身份验证流程。当用户未成功登录时,我正在渲染一堆带有登录屏幕的屏幕作为初始路由。并在用户登录成功时以主屏幕作为初始路由呈现另一组屏幕。

我的问题是,当用户登录成功时,不是直接出现主屏幕,而是登录屏幕出现几秒钟,不允许任何屏幕交互,然后主屏幕出现一些类似于 react-navigation 推送转换的动画。

预期行为:

我想在成功登录时显示主屏幕,没有上面提到的任何错误。

环境:

“react-native”:“0.61.5”,“@react-navigation/native”:“^5.0.5”,“@react-navigation/stack”:“^5.0.5”“react-native-reanimated” :“^1.7.0”、“react-native-safe-area-context”:“^0.7.3”、“react-native-screens”:“^2.0.0-beta.7”、“@react-本机社区/屏蔽视图”:“^0.1.6”,

代码:

0 投票
1 回答
2588 浏览

react-native - 反应导航重置堆栈不起作用。react-navigation v5重置堆栈不起作用

我有一个身份验证屏幕,我正在那里进行身份验证工作,但是在成功登录后,我想将堆栈重置为主屏幕。但我收到此错误,因为屏幕未定义。

应用程序.js

DrawerNavigator.js

成功登录后在 Login.js 内我正在这样做

如何将堆栈从 LOGIN 删除到 DRAWER