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 中的前一个屏幕。

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

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

Answer 1

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

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

React Native goBack() 与 TabNavigator 和 StackNavigator react-navigation v5

1 个答案: