[reference]

• https://reactnavigation.org/docs/bottom-tab-navigator/#initialroutename

이제 전체적인 구조는 잡혔고
Main (Tab.Navigator)를 만들어야 한다.

Tab navigator 생성 및 사용

npm install @react-navigation/bottom-tabs

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';


const Tab = createBottomTabNavigator();

const MainTabScreen = ({navigation, route}) => {
  return (
    <Tab.Navigator
      initialRouteName="HomeStack"
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, color, size}) => {
          let iconName;

          if (route.name === 'TestStack') {
            iconName = focused ? 'document' : 'document-outline';
          } else if (route.name === 'HomeStack') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'SettingStack') {
            iconName = focused ? 'person-circle' : 'person-circle-outline';
          }

          // You can return any component that you like here!
          return <Icon name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'black',
        inactiveTintColor: 'lightgray',
        showLabel: false,
      }}>
      <Tab.Screen name="TestStack" component={TestStackScreen} />
      <Tab.Screen name="HomeStack" component={HomeStackScreen} />
      <Tab.Screen name="SettingStack" component={SettingStackScreen} />
    </Tab.Navigator>
  );
};

MainTabScreen이라는 이름으로 탭을 생성하여 Tab.Screen마다 Stack을 넣었다.

App.js

이렇게해서 완성된 구조! import가 넘 많아서 생략

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

const Stack = createStackNavigator();
const TestStack = createStackNavigator();
const HomeStack = createStackNavigator();
const SettingStack = createStackNavigator();
const Tab = createBottomTabNavigator();

//뒤로 가기 버튼 Image 컴포넌트
function BackBtn() {
  return (
    <Image
      source={require('./src/back-btn.png')}
      style={{marginLeft: 10, width: 22, height: 22}}
    />
  );
}

const HomeStackScreen = () => {
  return (
    <Stack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Search" component={SearchScreen} />
      <HomeStack.Screen name="SearchResult" component={SearchResultScreen} />
      <HomeStack.Screen name="MyBook" component={MyBookScreen} />
      <HomeStack.Screen name="AcademyBook" component={AcademyBookScreen} />
      <HomeStack.Screen name="IncorNote" component={IncorNoteScreen} />
      <HomeStack.Screen name="IncorNoteRead" component={IncorNoteReadScreen} />
      <HomeStack.Screen name="Mark" component={MarkScreen} />
      <HomeStack.Screen name="MarkResult" component={MarkResultScreen} />
      <HomeStack.Screen
        name="MarkResultSave"
        component={MarkResultSaveScreen}
      />
    </Stack.Navigator>
  );
};

const SettingStackScreen = () => {
  return (
    <Stack.Navigator>
      <SettingStack.Screen name="Profile" component={ProfileScreen} />
      <SettingStack.Screen name="ProfileEdit" component={ProfileEditScreen} />
    </Stack.Navigator>
  );
};

const TestStackScreen = () => {
  return (
    <Stack.Navigator>
      <TestStack.Screen name="TestCreate" component={TestCreateScreen} />
      <TestStack.Screen name="TestRead" component={TestReadScreen} />
    </Stack.Navigator>
  );
};

const MainTabScreen = () => {
  return (
    <Tab.Navigator initialRouteName="HomeStack">
      <Tab.Screen name="TestStack" component={TestStackScreen} />
      <Tab.Screen name="HomeStack" component={HomeStackScreen} />
      <Tab.Screen name="SettingStack" component={SettingStackScreen} />
    </Tab.Navigator>
  );
};

// Stack Navigator for Login and Register and Logout Screen
const Auth = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Login"
        component={LoginScreen}
        options={{
          title: '',
          headerBackTitleVisible: false,
          headerBackImage: BackBtn,
        }}
      />
      <Stack.Screen
        name="Register"
        component={RegisterScreen}
        options={{
          title: '',
          headerBackTitleVisible: false,
          headerBackImage: BackBtn,
        }}
      />
    </Stack.Navigator>
  );
};

const App: () => React$Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="SplashScreen">
        <Stack.Screen
          name="SplashScreen"
          component={SplashScreen}
          options={{headerShown: false}}
        />
        {/* Auth Navigator: Include Login and Signup */}
        <Stack.Screen
          name="Auth"
          component={Auth}
          options={{headerShown: false}}
        />
        <Stack.Screen name="MainTab" component={MainTabScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({});

export default App;

initialRouteName

이제 로그인이 완료되면 MainTab으로 온다!

근데.. MainTab 순서가 TestStack이라서 이렇게 Test부분부터 나오는데

HomeStack이 먼저 나오게 하고 싶다. (탭 순서로는 두 번째를 유지하면서)

→ Tab.Navigator의 Props중 하나인 initialRouteName을 활용한다.

<Tab.Navigator initialRouteName="HomeStack">