React Navigation 导航到特定选项卡答案

【问题标题】：React Navigation navigate to specific tabReact Navigation 导航到特定选项卡
【发布时间】：2021-02-01 21:40:40
【问题描述】：

The example on React Navigation 显示了如何跳转到选项卡，但它会在您位于选项卡所在的导航器中的情况下显示。但是，如何从属于不同导航器的屏幕导航到特定选项卡？

我有：

function MealsNavigator() {
  const MealsStack = createStackNavigator();
  return (
    <MealsStack.Navigator>
      <MealsStack.Screen
        name="Meals"
        component={MealsScreenTabs}
      />
    </MealsStack.Navigator>
  );
}

function MealsScreenTabs() {
  const MealsTabs = createMaterialTopTabNavigator();
  return (
    <MealsTabs.Navigator>
      <MealsTabs.Screen name="Upcoming" component={MealsUpcomingScreen} />
      <MealsTabs.Screen name="Past" component={MealsPastScreen} />
    </MealsTabs.Navigator>
  );
}

我希望能够通过在帐户导航器内的我的个人资料屏幕上单击按钮来导航到用餐 > 过去。怎么样？

【问题讨论】：

你能在这里写下你的屏幕嵌套吗？帐户导航器在哪里？
标签位于膳食导航器中，为什么查看帐户导航器很重要？

标签： reactjs react-native react-navigation

【解决方案1】：

在反应导航 v5 中

navigation.navigate('Meals', {screen: 'Past'});

【讨论】：

这只是导航到膳食导航器并显示最后选择的选项卡。因此，如果我上次选择“即将到来”并执行navigate('Meals', {screen: 'Past'});，它将导航到“用餐”并显示“即将到来”。不是“过去”

【解决方案2】：

从 Discord 社区获得了一些帮助。这里'你是怎么做的：

navigation.navigate('Meals', {
  screen: 'Meals',
  params: {screen: 'Past'},
})

要查看它的实际效果，have a look at a snack I created

【讨论】：