如何在 StackNavigator 中卸载模糊屏幕？

Question

我正在使用 React Navigation x5，我有 StackNavigator 正在加载一堆屏幕。我想在模糊上卸载一个特定的屏幕组件，以获得与使用 unmountOnBlur 时使用 DrawerNavigator 时相同的结果。

我怎样才能做到这一点？

Answer 1

根据文档Call a function when focused screen changes，您可以监听focus 事件，或useFocusEffect 挂钩来触发操作。

useFocusEffect 的示例可能如下所示。

import { useFocusEffect } from '@react-navigation/native';

function Sample(props) {
  const [shouldHide, setShouldHide] = React.useState(false);

  useFocusEffect(() => {
    setShouldHide(false)
    return () => {
       setShouldHide(true)
    }
  });

  return shouldHide ? null : <InnerComponent {...props} />;
}

除此之外，堆栈导航器带有一个名为 detachInactiveScreens 的属性，默认情况下是启用的。 Link to the documentation

detachInactiveScreens

布尔值用于指示是否应从视图层次结构中分离非活动屏幕以节省内存。确保从react-native-screens 调用enableScreens 以使其正常工作。默认为true。

（启用 React Native Screens 的说明可以在 https://reactnavigation.org/docs/react-native-screens/#setup-when-you-are-using-expo 找到）

在堆栈导航器的options 对象中，还有一个detachPreviousScreen 属性来自定义某些屏幕的行为。此选项通常也会启用。

detachPreviousScreen

布尔值，用于指示是否从视图层次结构中分离上一个屏幕以节省内存。如果您需要通过活动屏幕看到上一个屏幕，请将其设置为false。仅在 detachInactiveScreens 未设置为 false 时适用。当mode='modal' 时默认为false，否则为true。