R
R
razrabotzik2021-11-24 18:39:27
React Native
razrabotzik, 2021-11-24 18:39:27

How to create navigation Screen and BottomTabs in conjunction?

I comprehend the basics of react native, in fact, a question arose when creating a router. How to link 2 different types of routing. Initially I did it like this

const Stack = createNativeStackNavigator();

const AppNavigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={CATALOG}>
        <Stack.Group>
          <Stack.Screen key={CATALOG} name={CATALOG} component={component} />
          <Stack.Screen key={PROFILE} name={PROFILE} component={component} />
          <Stack.Screen key={CART} name={CART} component={component} />
          <Stack.Screen key={CONTACTS} name={CONTACTS} component={component} />
          <Stack.Screen key={STOCK} name={STOCK} component={component} />
        </Stack.Group>
        <Stack.Group screenOptions={{ presentation: 'modal' }}>
          <Stack.Screen key={GIFT} name={GIFT} component={component} />
        </Stack.Group>
      </Stack.Navigator>
    </NavigationContainer>
  )
}

const App = () => {
  return (
    <AppNavigation />
  );
};


But now I have reached the bottom navigation, which partially copies what is set via Stack and I don’t understand how to attach Tab to this (in tabs you need to display the first 4 screens). On the one hand, tabs can be simulated through View + Pressable + Text, but how true is this option, will I run into some troubles later? On the other hand, I can initially try to do it on tabs, but then I will need to blind the cap obtained from the basic components + I don’t understand how to hide, let’s say, unnecessary screens (STOCK and the GIFT modal)

Share how you solve such situations.

ps tabs is about
const Tab = createBottomTabNavigator();

Answer the question

In order to leave comments, you need to log in

1 answer(s)
K
Kirill Makarov, 2022-01-17
@kirbi1996

<Stack.Group screenOptions={{ presentation: 'modal' }}>
          <Stack.Screen name={bottomtab} component={componentBottomTab} />
<Stack.Screen key={GIFT} name={GIFT} component={component} />
 </Stack.Group>

And in the bottom tab you create a regular bottom stack according to the documentation

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question