Блог

Я использую react navigation v5. У меня есть нижний навигатор вкладок, внутри каждой вкладки есть стопка экранов.

 Home-Tab1,Tab2,Tab3
Tab1(stack)-A,B,C
Tab2(stack)-D,E,F
Tab3(stack)-G,H
 

Как обрабатывать видимость вкладок на экранах, которые находятся внутри стека. (т.е. индекс> 0 или кроме экрана начального маршрута стека). В приведенном выше сценарии я хочу скрыть нижнюю панель на экранах B, C, E, F, H.

Я прочитал https://reactnavigation.org/docs/hiding-tabbar-in-screens . Но я не могу понять его реализацию с несколькими стеками. Кто-нибудь реализовал это с помощью react navigation 5?

Смешивание мест в документации может несколько сбивать с толку. Это просто BottomTabNavigator со страницами, на которых вы хотите, чтобы панель вкладок была видна вложенной внутри StackNavigator, который содержит остальные экраны.

 function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="A" component={A} />
      <Tab.Screen name="D" component={D} />
      <Tab.Screen name="G" component={G} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="B" component={B} />
      <Stack.Screen name="C" component={C} />
      <Stack.Screen name="E" component={E} />
      <Stack.Screen name="F" component={F} />
      <Stack.Screen name="H" component={H} />
    </Stack.Navigator>
  );
}
 

Здесь HomeTabs() — это bottomTabNavigator, который вложен в StackNavigator.
и для навигации между экранами вызывайте:

 navigation.navigate("navigatorName",{screen: "screenName"})