在屏幕内对导航createMaterialTopTabNavigator进行反应

Question

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

请注意，顶部导航器堆栈似乎在屏幕内。 “材料顶部标签”顶部有一个标题，我们可以返回“示例”

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

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

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

我目前拥有的是底部的基本标签导航，

<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'，{名称：'即将到来的}）而不是navigation.navigate（'Tabs'，{屏幕上的：'即将到来的}） ; https://reactnavigation.org/docs/material-top-tab-navigator#jumpto