(React Native)在导航到另一个页面完成后执行返回效果

gr8qqesn  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(128)

这段代码是我面临的问题的一个例子。

import {useEffect} from 'react';
import {Pressable, Text} from 'react-native';

function page1() {
  useEffect(() => {
    console.log(1); 1️⃣  

    return () => {
      console.log(2); 2️⃣
    };
  }, []);

  return (
    <Pressable onPress={() => navigation.navigate('page1')}>
      <Text>BUTTON</Text>
    </Pressable>
  );
}

function page2() {
  useEffect(() => {
    console.log(3); 3️⃣   

    return () => {
      console.log(4); 4️⃣
    };
  }, []);

  return (
    <Pressable onPress={() => navigation.goBack()}>
      <Text>BUTTON</Text>
    </Pressable>
  );
}

当屏幕从第页1移动到第页2时,我希望它按以下顺序运行

1️⃣ console.log(1); // when on page1
2️⃣ console.log(2); // When leaving page1
3️⃣ console.log(3); // when on page2
4️⃣ console.log(4); // when leaving page2

然而,实际结果如下

1️⃣ console.log(1); // when on page1
❓ Nothing happens // When leaving page1
3️⃣ console.log(3); // when on page2 ❓
2️⃣ console.log(2); // When on page2 ❓
4️⃣ console.log(4); // when exiting page2

第二步和第三步正在颠倒。页面1上的useEffet返回逻辑正在页面2上运行并影响它。
有什么好办法解决这个问题吗?

wnavrhmk

wnavrhmk1#

这就是实际发生的事情:

1,3,4

  • setup函数(1)在添加page1时被调用
    *导航至第2页
  • 当添加page2时,调用setup函数(3)
    *回去
  • 删除page2时,调用cleanup函数(4)

page1永远不会被删除,因此不会调用cleanup函数(2)
查看useEffect的详细信息。
使用useFocusEffect来检测页面何时进入焦点以及何时离开焦点。
一,三,二,四,一

  • page1成为焦点时,setup函数(1)被调用
    *导航至第2页
  • setup函数(3)在page2成为焦点时被调用
  • cleanup函数(2)在page1失焦时调用
    *回去
  • cleanup函数(4)在page2失焦时调用
  • setup函数(1)在page1进入焦点时被调用

相关问题