问题标签 [react-navigation-v6]

我正在尝试使用 @react-navigation/native-stack 和 presentation: 'modal' 在平板电脑上获得更多原生感觉。我的问题是我没有找到任何方法来获取模态窗口的尺寸。我都试过了useWindowDimensions()，Dimensions.get('window/screen')但我总是得到整个应用程序窗口的大小，而不仅仅是模态窗口的大小。

有什么办法吗？

我正在使用 React Native 创建一个移动应用程序，我最终使用 react-navigation v6 在我的应用程序的仪表板中创建了一个抽屉导航器。仪表板仅在用户登录时显示，而登录屏幕在用户未登录时显示。

我想在仪表板上添加一个抽屉，并使用仪表板顶部栏上的按钮打开它。我有一个DashboardScreens组件，它只呈现这样的仪表板组件：return <Dashboard />;. 我为创建抽屉所做 的就是createDrawerNavigator从. 现在，返回的 JSX如下所示：'@react-navigation/drawer'NavigationContainer'@react-navigation/native'DashboardScreens

导航器的创建是在 的定义之上完成的DashboardScreens，通过这一行：const MenuNav = createDrawerNavigator();

但是，我现在得到的只是一个空白屏幕。

这是测试：

我已经尝试过这里和这里给出的解决方案，但它们对我不起作用。

我认为问题在于我使用的是 TypeScript 和 React Navigation v6，因为：

1. const setOptions = jest.fn(); 我得到：

   NativeStackNavigationProp<RootStackParamList, "Home">是我对组件的类型。

   就是这个：export type HomeProps = NativeStackScreenProps<RootStackParamList, 'Home'>;

   后来我导入为HomeProps

2. const setOptions = (navigation: any, route: any) => { }

   我得到：

3. const setOptions = (props: HomeProps) => { }

   我得到：

4. const setOptions = (options: Partial<NativeStackNavigationOptions>) => void （@captain-yossarian 的建议）

我得到：

我该如何解决这个问题？

我想要实现的目标很简单。我希望用户被迫确认退出名为“结帐”的选项卡导航器。

我在 React Navigation 文档上阅读了有关防止返回“beforeRemove”事件的信息，该事件看起来很整洁且使用正确。

问题是，在他们的示例中，他们在事件侦听器中调用 Alert，而我想显示一个带有是和否按钮的自定义模式。

这是 React Navigations 示例代码：

这是我尝试过的代码：

我必须在 eventListener 中使用 navigation.dispatch(e.data.action) 但 handleConfirmExit 函数必须在它之外，我只是不知道如何使用 beforeRemove 侦听器并从我的位置显示自定义模式可以退出选项卡。

按下后退按钮时侦听器正在触发并且模式显示，但是当按下是时没有任何反应（即运行 handleConfirmExit 函数）。

我尝试从 useEffect 中删除依赖项。确实有效的一件事，但仅在 Android 上是这样的：

在 iOS 上，由于某种原因，模式停留在下一个屏幕上，我认为罪魁祸首是上一个示例中“beforeRemove”侦听器的错误实现。

谢谢！

我有一个抽屉导航配置如下：

所有屏幕都可以正常工作，但我想Log out在按下时执行注销功能。据我了解，我不能直接在屏幕组件上添加这个事件监听器，所以我按照这个文档（https://reactnavigation.org/docs/drawer-navigator/#drawercontent）并尝试了一些不同的东西：

• 我创建了CustomDrawerContent一个DrawerItem.
• 如果我CustomDrawerContent作为组件传递到Log out屏幕（就像现在的代码一样），当我点击它时，我会被重定向到一个呈现CustomDrawerContent组件的空白页面，这不是我想要的。
• 如果我 CustomDrawerContent作为drawerContent道具传递给抽屉导航器，就像文档说的（下面的示例），所有其他屏幕都不再呈现，这又不是我想要的。

• 如果我将抽屉项目与导航器内的屏幕放在一起，应用程序会抛出以下错误：

那么如何在不“覆盖”屏幕的情况下将项目添加到抽屉中呢？还是有其他方法可以在抽屉中放置一个简单的注销按钮？

完整代码可以在这里找到：https ://github.com/coccagerman/mixr

我正在处理我的身份验证，当我尝试处理自动注销时我遇到了一些问题，我编写了到期时间后注销所需的功能，但是当我想在注销后导航回登录屏幕时我不能' t 因为我正在处理的组件（没有导航道具），我使用了文档但仍然没有工作！这是我的代码

这就是 App.js

我正在使用 React Native 开发一个应用程序并尝试从 React Navigation 5 迁移到 6。为此，我遵循了从 5.x 升级指南中的步骤。

React 和 React Native 的版本如下：

我已经安装了这些软件包：

升级软件包后，我在文件夹中运行pod install命令。ios

如果我运行npx react-native run-ios --simulator="iPhone 13"命令或使用 Xcode 在设备上运行，我会收到以下错误：

看起来像是libRNScreens.a从react-native-screens包裹里拿出来的。

你知道如何解决这个问题吗？

如果用户已登录，则需要触发 useNavigator()，否则需要显示导入的 UI 组件。

我已经从我的 App.js 设置了浏览器路由：

主页路由到“/ ”

另一个页面呈现在“/app”。

让我知道我是否应该提供更多详细信息。谢谢您的帮助！

我想在drawer元素为clicked. 换句话说，我正在寻找一个与 property 等价的抽屉tabPress。我尝试将我的回调添加到属性focus。但是，只要相关堆栈中的“任何屏幕”处于“焦点”状态，就会执行此回调。

我希望代码只有在用户“点击” “抽屉项目”时才会被删除。这是可能吗？

这个问题与 React-Navigation 版本 6 有关。

我有一个 navigator ( X) ，它拥有一个屏幕，我们称之为N，还有另一个 navigator ，Y. 我需要从 navigatorY中的屏幕移动N到根导航器中的屏幕。我将如何使用反应导航 6 来执行此操作？

根路由器的代码：

家庭路由器（导航器X）的代码：

配置文件路由器（导航器Y）的代码：

我需要从MainAccountPage屏幕导航navigator Y到Post.navigator X