如何在StackNavigator中卸载模糊屏幕

Question

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

我怎样才能做到这一点？

Answer 1

自5.x以来，目前有三种方法可以做到这一点。你可以选择

• 使用useFocusEffect挂钩触发操作(推荐(，或
• 使用useIsFocused挂钩，或
• 收听focus事件

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} />;
}

useIsFocused钩子的示例

import * as React from 'react';
import { Text } from 'react-native';
import { useIsFocused } from '@react-navigation/native';
function Profile() {
// This hook returns `true` if the screen is focused, `false` otherwise
const isFocused = useIsFocused();
return {isFocused ? <Text>Inner component</Text> : null};
}

注：

使用这个钩子组件可能会在屏幕进入和离开焦点时引入不必要的组件重新渲染。。。因此，我们建议仅在需要触发重新渲染时才使用此挂钩。

更多信息可以在文档中找到当聚焦屏幕更改时调用函数

---

除此之外，堆栈导航器还附带一个名为detachInactiveScreens的道具，该道具在默认情况下处于启用状态。文档链接

detachInactiveScreens

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

(有关启用React Native Screens的说明，请访问https://reactnavigation.org/docs/react-native-screens/#setup-当你使用expo(

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

detachPreviousScreen

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