使用 TabNavigator 和 StackNavigator react-navigation v5 反应本机 goBack()

Question

可能我在反应导航方面做得不好，也不了解嵌套导航的工作原理。 我在每个组件中都有BottomTabNavigator 和StackNavigator，如下例所示。

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function AStack(props){
    <Stack.Navigator mode="card" headerMode="screen">
      <Stack.Screen name="FirstScreenA" component={FirstScreenA}/>
      <Stack.Screen
                name="SecondScreenA"
                component={SecondScreenA}
                options={{
                    headerLeft:  () => (
                        <TouchableOpacity
                            onPress={() => props.navigation.goBack()} >
                        </TouchableOpacity>/>
    </Stack.Navigator>



<Tab.Navigator>
  <Tab.Screen name="A" component={AStack} />
  <Tab.Screen name="B" component={BStack} />
</Tab.Navigator>

在FirstScreenA 组件内，我有导航到SecondScreenA 的按钮。 通过props.navigaton.goBack() 在Stack.Screen 我想回到FirstScreenA。

事实上，goBack() 以Tab.Navigator 的形式将我带到上一个屏幕。所以，如果我之前在BStack 中，goBack() 在AStack 中将我移动到BStack 中的屏幕。

我的目标是回到AStack 中的上一个屏幕。

据我所知，Tab.Navigator 中的 navigation 属性会自动转到堆栈组件。在这种情况下，我无法使用类似pop(), push(), popToTop() 的方法来提供帮助，因为这些方法在Tab.Navigator 的navigation 中不可用。任何带有StackActions 的钩子都不起作用。 navigation.navigate('FristScreenA') 不起作用，似乎认为我们已经在所需的堆栈和屏幕中，所以什么也没有发生。

我想有一种方法可以在 Stack 中使用内部导航（不是从 Tab 嵌套），但没有找到这样做的方法。如果有人可以澄清我并解释该怎么做-那就太好了。 提前致谢。

Answer 1

这是因为您在堆栈导航器组件AStack 中接收到props.navigation，这是您的TabNavigator 的直接子代。在反应导航中，孩子们收到他们包含父母的props.navigation对象，在你的情况下，你收到TabNavigator的props.navigation对象，这就是为什么使用goBack会带你到你的@987654328的上一个标签@。

要接收堆栈导航器的导航道具，您需要在您的Stack.Screen 组件中执行此操作，在您的情况下为FirstScreenA 或SecondScreenA，因为它们是您的StackNavigator 的直接子级。所以在SecondScreenA 组件中使用props.navigation.goBack 实际上会带你回到FirstScreenA。