React Native createStackNavigator и createBottomTabNavigator

Question

Итак, я смотрел на React Native Tab Navigation v5 (https://reactnavigation.org/docs/tab-based-navigation), и я не могу понять, как я могу иметь навигатор вкладок и навигатор стека одновременно.

//react-native-gesture-handler at top according to reactnavigation.org/docs/
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';

//npm packages
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//pages
import login from './pages/login';
import main from './pages/main'; 
import page1 from './pages/page1';
import page2 from './pages/page2';
import page3 from './pages/page3';
import page4 from './pages/page4';
import page5 from './pages/page5';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const TabStack = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={page1} />
        <Tab.Screen name="Page2" component={page2} />
      </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" headerMode="none">
        <Stack.Screen name="Login" component={login} />
        <Stack.Screen name="Main" component={main} />
        <Stack.Screen name="page1" component={page1} />
        <Stack.Screen name="page2" component={page2} />
        <Stack.Screen name="page3" component={page3} />
        <Stack.Screen name="page4" component={page4} />
        <Stack.Screen name="page5" component={page5} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Идея заключается в том, что я хочу иметь возможность перемещаться между всеми экранами, но я хочу включить bottomTabNavigator только на некоторых. Кто-нибудь может мне подсказать, как этого можно достичь в React Native?

Answer 1

Из документации React navigation 5

Самый простой способ добиться этого - вложить навигатор вкладок внутри первого экрана стека вместо того, чтобы вкладывать стек внутри навигатора вкладок

Это пример из документации:

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Что в вашем случае переведет на размещение всего экрана, на котором вы хотите отобразить панель вкладок, в TabStack:

const TabStack = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={page1} />
        <Tab.Screen name="Page2" component={page2} />
      </Tab.Navigator>
  );
}

и все остальные экраны и навигатор вкладок в навигаторе стека

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" headerMode="none">
        <Stack.Screen name="Page1" component={TabStack}
        <Stack.Screen name="Login" component={login} />
        <Stack.Screen name="Main" component={main} />
        <Stack.Screen name="page3" component={page3} />
        <Stack.Screen name="page4" component={page4} />
        <Stack.Screen name="page5" component={page5} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}