这里的写法是函数组件,由于用class组件的时候不多,就不怎么用生命周期函数(我也看了生命周期函数,只有进入页面执行一次,然后去其他页面之后,再返回这个页面就不会执行了。)

1、 使用 useFocusEffect 

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

  useFocusEffect(React.useCallback(() => {
		console.log('激活/进入当前页面');
  }, []));

2、使用 navigation.addListener

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

  const navigation = useNavigation()  

  useEffect(() => {
    const unsubscribe = navigation.addListener("focus", () => {
      console.log("当前页面获取到焦点了。")
    });
    return () => {
      unsubscribe();
    };
  }, [navigation]);
    useEffect(() => {
        const unsubscribeBlur = navigation.addListener('blur', () => {
            console.log('失去焦点');
            expLoreStore.clearSound();
        });
        return () => {
            unsubscribeBlur();
        };
    }, [navigation]);

 

        不同点:useFocusEffect是第一次进入这个页面以及后续进入都会执行的函数。

navigation.addListener 是第一次激活当前页面的时候,不会执行,后续每次返回到这个页面的时候,才会执行。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐