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

时间:2019-11-04 15:39:57

标签: javascript reactjs react-native react-navigation

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

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

  • BottomTabNavigator
    • Stack1
      • 屏幕
      • 屏幕
    • Stack2
      • 屏幕
      • 屏幕

4 个答案:

答案 0 :(得分:3)

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

unmountOnBlur: true

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

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

答案 1 :(得分:3)

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

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

它工作得很好。

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

我找到了两种卸载方式。

  1. 第一种方法是使用 { "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

  2. 第二种方法是在导航时完全卸载组件。这个正在作为反应卸载工作。 https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur