Question

Im使用react-navigation进行react-native。是否有使非活动选项卡屏幕像unmountInactiveRoutes：一样在DrawerNavigator中卸载的选项？我找不到BottomTabNavigator的unmountInactiveRoutes之类的东西。

我在BottomTabNavigator中有两个堆栈导航器，我想自动卸载它们。

BottomTabNavigator
- Stack1
  - 屏幕
  - 屏幕
- Stack2
  - 屏幕
  - 屏幕

Answer 1

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

unmountOnBlur: true

您可以在“标签和抽屉导航”中执行此操作，但不能在“堆栈导航”中执行。

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

Answer 2

我尝试了 Ubaid 的回答，它有效。但是你也可以试试这个：使用

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

它工作得很好。

Answer 3

所以我不知道您是否可以卸载个人不活动的组件，但找不到，但这是我的解决方法withNavigationFocus(FocusStateLabel) 如果isFocused为假。返回null。因此，这将或多或少为您提供所需的东西。如果isFocused为true，则将渲染通常渲染的内容。如果为false，您将返回null。导致您的组件被卸载

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

Answer 4

我找到了两种卸载方式。

第一种方法是使用 { "scripts": { "i18n:init": "ngx-translate-extract --input ./src --output ./src/assets/i18n/template.json --key-as-default-value --replace --format json", "i18n:extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/{en,da,de,fi,nb,nl,sv}.json --clean --format json" } } 触发卸载。根据我的经验，这并不是完全卸载组件。它只触发 unmount 函数来取消订阅事件。 https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener
第二种方法是在导航时完全卸载组件。这个正在作为反应卸载工作。 https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur

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

4 个答案: