React Navigation 的 navigate() 函数不起作用

Question

我正在使用 React Native 和 React Navigation 库构建应用程序。

重现问题的步骤

所以使用 React Navigation 5，我构建了一个带有两个屏幕的堆栈导航器，如下所示：

const Stack = createStackNavigator();
const Nav = () => {
  <Stack.Navigator
    <Stack.Screen
        name="A"
        component={A}
    />
    <Stack.Screen
        name="B"
        component={B}
    />
  </Stack.Navigator>
}

由于屏幕 A 是导航器中的第一个屏幕，因此它将是第一个在屏幕上显示和渲染的屏幕。现在我想在 A 渲染后立即导航到 B，所以我在 A 中编写了以下代码：

useEffect(()=>{
    navigation.navigate('B');
}, [navigation]);

问题

问题是屏幕停留在 A 并且没有导航到 B

可能的原因

我认为当屏幕 A 尝试执行其useEffect 代码时，屏幕 B 仍未加载到导航器的 DOM 中。因为当我实际上尝试像这样将useEffect 的执行延迟2秒时：

useEffect(()=>{
    setTimeout(()=>{
        navigation.navigate('B');
    }, 2000)
}, [navigation]);

它成功了，屏幕从 A 导航到 B！所以我想 B 有时间在不到 2 秒的时间内加载到 DOM 中？

有什么办法吗？

所以，如果我的假设是正确的，我想知道是否有一种正式的方法来检查屏幕 B 是否已有效加载到导航器的 DOM 中，或者可能等到导航器在 A 中执行 useEffect 之前已渲染。也许有一个特殊的反应钩子或库来检查这种情况？

如果我错了，请帮助我！

Answer 1

我认为导航不起作用，因为您没有像这样将堆栈屏幕包装到堆栈导航器中：

<Stack.Navigator>
    <Stack.Screen
        name="A"
        component={A}
    />
    <Stack.Screen
        name="B"
        component={B}
    />
</Stack.Navigator>

这显示在navigation docs