Блог

Реагирующая навигация 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' });

Если вы хотите перейти на какую-либо вкладку внутри createMaterialTopTabNavigator.Вместо navigation.navigate(‘Tabs’, { screen: ‘Предстоящий’ }) используйте navigation.jumpTo(‘Tabs’, { name: ‘Предстоящий’ }); https://reactnavigation.org/docs/material-top-tab-navigator#jumpto