使用 TabNavigator 和 StackNavigator react-navigation v5 反应 Native 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 中，AStack 中的 goBack() 会将我移动到 BStack 中的屏幕。

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

据我了解，来自 Tab.Navigator 的 navigation 道具会自动转到 Stack Components。在这种情况下，我无法使用像 pop(), push(), popToTop() 这样应该有帮助的方法，因为这些方法在 Tab.Navigator 的 navigation 中不可用。任何带有 StackActions 的钩子都不起作用。 navigation.navigate('FristScreenA') 不起作用，似乎是认为我们已经在所需的堆栈和屏幕中，所以什么也没有发生。

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

Answer 1

这是因为您在堆栈导航器组件 AStack 中接收 props.navigation，这是您的 TabNavigator 的直接 children。在 React 导航中，children 收到它们包含 parents 的 props.navigation object，在你的情况下，你收到 props.navigation object 的 props.navigation object TabNavigator，这就是为什么使用 goBack 会将您带到 TabNavigator 的上一个选项卡。

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

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

React Native goBack() with TabNavigator and StackNavigator react-navigation v5

react-native

react-navigation-v5