Question

React-Native 导航使用 useEffect 和 setTimeout 跳转到错误屏幕

2021-06-25

1057

react-native navigation stack settimeout use-effect

我有一个导航堆栈，其中包含不同的屏幕，我想让它们一个接一个地渲染。我将超时设置为 5 秒，因此它将转到堆栈中的下一个屏幕。

<Stack.Screen name="StoryScreenOne" component={StoryScreenOne} />
<Stack.Screen name="StoryScreenTwo" component={StoryScreenTwo} />
<Stack.Screen name="StoryScreenThree" component={StoryScreenThree} />

我的超时函数是这样的

useEffect(() => {
        setTimeout(() => {
            props.navigation.navigate('StoryScreenTwo');
        }, 5000);
    });

问题是，如果我在屏幕二上并导航回屏幕一，则渲染的下一个屏幕是屏幕三，而不是我想要的屏幕二。

有什么技巧吗？

Answer 1

如果我理解正确的话，当您到达第二个屏幕时，还有另一个 useEffect ，如下所示：

useEffect(() => {
    setTimeout(() => {
 props.navigation.navigate('StoryScreenThree');
        }, 5000);
    });

我认为 setTimeout 仍在运行，因此如果您想在 goBack 上重新渲染第二个屏幕，则需要在按下返回按钮时使用 clearTimeOut。看看这个： https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals 但是当您导航时，您的第一个屏幕不会卸载，因此您需要使用监听器重新启动 UseEffect ，如下所示：

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

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

更多信息请点击此处： https://reactnavigation.org/docs/navigation-lifecycle/