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

Question

我有一个导航堆栈，其中包含不同的屏幕，我不想在这些屏幕之后渲染。我将超时设置为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上重新发送屏幕2，你需要在按下后退按钮时使用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/