在屏幕内反应导航createMaterialTopTabNavigator

Question

React 导航 createMaterialTopTabNavigator 在其文档页面顶部显示了一个非常酷的设置：

请注意，顶部导航器堆栈似乎位于屏幕内。顶部有一个标题“Material Top Tabs”，我们可以回到“Examples”

有趣的是，任何示例中都没有给出此设置。

我希望有相同的设置，并且能够从另一个屏幕导航到特定选项卡。

有人可以分享一个示例代码吗？

我目前拥有的是一个基本的底部选项卡导航，带有

<BottomTab.Screen
  name="Tabs"
  component={TabsNavigator}
/> 

然后

function TabsNavigator() {
  const MyTabs = createMaterialTopTabNavigator();
  return (
    <MyTabs.Navigator
      <MyTabs.Screen name="Upcoming" component={TabsUpcomingScreen} />
      <MyTabs.Screen name="Past" component={TabsPastScreen} />
    </MyTabs.Navigator>
  );
}

虽然这在执行

navigation.navigate('Tabs', { screen: 'Upcoming' });

时有效，但我缺少包含选项卡的屏幕...或“选项卡”屏幕（如示例中所示，它是“材料顶部选项卡”屏幕）

我可以做这样的事情：

function TabsNavigator() {
  const TabsStack = createStackNavigator();
  return (
    <TabsStack.Navigator>
      <TabsStack.Screen name="Tabs" component={TabsScreen} options={{ headerTitle: 'Tabs' }} />
    </TabsStack.Navigator>
  );
}

function TabsScreen() {
  const MyTabs = createMaterialTopTabNavigator();
  return (
    <MyTabs.Navigator
      <MyTabs.Screen name="Upcoming" component={TabsUpcomingScreen} />
      <MyTabs.Screen name="Past" component={TabsPastScreen} />
    </MyTabs.Navigator>
  );
}

但是我无法使用

navigation.navigate('Tabs', { screen: 'Upcoming' });

导航到特定选项卡

Answer 1

如果您想导航到 createMaterialTopTabNavigator 内的某个选项卡。请使用 navigation.jumpTo('Tabs', { name: 'Upcoming' }); 而不是 navigation.navigate('Tabs', { screen: 'Upcoming' }); https://reactnavigation.org/docs/material-top-tab-navigator#jumpto

Answer 2

与本为我工作的上述内容相同。