如何在底部选项卡导航器反应导航中卸载非活动屏幕？

Question

我使用 react-navigation 进行 react-native。是否有一个选项可以让非活动选项卡屏幕像 unmountInactiveRoutes: true 那样在 DrawerNavigator 中卸载？我找不到像BottomTabNavigator的unmountInactiveRoutes这样的东西。

我在 BottomTabNavigator 中有两个 stacknavigator，我想自动卸载它们。

• 底部标签导航器
  • 堆栈1
    • 屏幕
    • 屏幕
  • 堆栈2
    • 屏幕
    • 屏幕

Answer 1

您可以通过在导航 screenOptions 中添加选项来卸载底部选项卡中的屏幕：

unmountOnBlur: true

您可以在 Tab & Drawer Navigations 中执行此操作，但不能在 Stack Navigation 中执行此操作。

您还可以通过在选项卡或抽屉屏幕选项中添加相同的选项来添加卸载单个屏幕。

Answer 2

我尝试了 Ubaid\xe2\x80\x99s 答案，它有效。但你也可以尝试这个：\n使用

\n

import {useIsFocused} from '@react-navigation/native';\nconst isFocused = useIsFocused();\nuseEffect(() => {\n    // Do whatever you want to do when screen gets in focus\n  }, [props, isFocused]);\n

\n

它工作得很好。

\n

Answer 3

所以我不知道您是否可以卸载个人不活动的组件我没有找到它但是这是我的解决方法withNavigationFocus(FocusStateLabel) 并且如果isFocused是错误的。返回空值。因此，这将或多或少地为您提供您正在寻找的东西。如果 isFocused 为 true，您将渲染通常渲染的内容。如果为 false，您将返回 null。导致卸载您的组件

一些参考https://reactnavigation.org/docs/en/with-navigation-focus.html