Reactjs React Native：打开或关闭页面时打印消息

当屏幕打开或关闭时，我需要打印一条消息。我使用

useffect

来显示组件何时装载和何时卸载。这是

useffect

的代码：

  useEffect(() => {
     console.log("Starting Home");
    return () => {
        console.log("Ending Home");
    };
},[])

以及

App.js

中的导航：

    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="About" component={About} />
      </Stack.Navigator>
    </NavigationContainer>

---

在这里，当我打开应用程序时，它会自动加载主屏幕。该应用程序在“关于”页面上正常工作，并在打开或关闭时打印消息。但是，当应用程序打开时，它只会在主页上打印一次消息。

如果您想在每次屏幕聚焦时显示消息，则应使用UseFocuseEffect而不是useEffect

useEffect仅在安装时运行，主屏幕仅安装一次

替换为

 useFocusEffect(
    React.useCallback(() => {
    console.log("Starting Home");
      return () => {
          console.log("Starting Home");
      };
    }, [])
  );

你必须导入它

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

---

如果希望在每次屏幕聚焦时显示消息，则应使用useFocusEffect而不是useEffect

useEffect仅在安装时运行，主屏幕仅安装一次

替换为

 useFocusEffect(
    React.useCallback(() => {
    console.log("Starting Home");
      return () => {
          console.log("Starting Home");
      };
    }, [])
  );

你必须导入它

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

---

谢谢你，伙计。成功了。但我有一个问题。当我导航到另一个页面时，屏幕是否保持打开状态？不应该完全关闭吗？它保留在堆栈上实际上，我已经在这个答案中给出了详细的解释，非常感谢。成功了。但我有一个问题。当我导航到另一个页面时，屏幕是否保持打开状态？不应该完全关闭吗？它保留在堆栈上实际上，我已经在这个答案中给出了详细的解释