[React-Native] Stack과 Tab Navigation 같이 쓰기

2022.10.17 - [Android/React-Native] - [React-Native] Bottom Navigation

[React-Native] Bottom Navigation

2022.10.20 - [Android/React-Native] - [React-Native] Stack Navigation

[React-Native] Stack Navigation

Stack 과 Tab 네비게이션을 아직 모른다면 위 글을 한 번 읽고 오는 것을 추천한다!

 

Tab Navigation안에 Stack Navigation을 사용하는 코드 및 Navigation을 한 파일에 모두 넣어 관리하게 쉽도록 해보자.

 

Tab안에 Stack 넣는 방법

구현하는 방법은 간단하다.

여기 Tab을 구현한 코드가 있고 HomeStack과 SettingsStack 컴포넌트로 구성되어 있다.

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="HomeStack" screenOptions={{headerShown:false}}>
        <Tab.Screen 
          name="HomeStack" 
          component={HomeStack} 
          options={{tabBarIcon: ()=> <Feather name="home" size={30}/> }}
        />
        <Tab.Screen 
          name="SettingsStack" 
          component={SettingsStack} 
          options={{tabBarIcon: ()=> <Feather name="settings" size={30}/> }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

 

이제 HomeStack 컴포넌트 구현한 파일로 가서 다음과 같이 Stack Navigation을 구현해준다.

 

const HomeStack=()=>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen name="Hi" component={Hi}/>
    </Stack.Navigator>
  )
}

 

이렇게 되면 HomeStack.js를 통해 Home.js를 불러올 수 있다.

그러면 Tab의 화면은 Home 페이지가 되고, Tab이 유지되는 상태로 Hi 페이지로 이동할 수 있다. 

 

그런데 이렇게 Stack Navigation을 사용할 때마다 HomeStack.js 같은 파일을 만들게 되면 파일의 양이 많아져서 귀찮아 진다.

그래서 이번에는 한 파일 내에 Navigation을 모두 정리하는 방법을 사용해보자!

 

Navigation 모아두기

얘도 매우 간단하다.

사실 위에서 다 구현한 방법을 가져다 쓰면 되는데 위에서는 HomeStack 파일을 만들어서 따로 뺐지만 따로 빼지 않고 그냥 App.js 파일 안, App 함수 밖에 선언해두면 바로 사용할 수 있다.

const HomeStack=()=>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen name="Hi" component={Hi}/>
    </Stack.Navigator>
  )
}

 

이런 식으로 말이다.

 

const HomeStack=()=>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen name="Hi" component={Hi}/>
    </Stack.Navigator>
  )
}

const SettingsStack=()=>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="Settings" component={Settings}/>
      <Stack.Screen name="Welcome" component={Welcome}/>
    </Stack.Navigator>
  )
}

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="HomeStack" screenOptions={{headerShown:false}}>
        <Tab.Screen 
          name="HomeStack" 
          component={HomeStack} 
          options={{tabBarIcon: ()=> <Feather name="home" size={30}/> }}
        />
        <Tab.Screen 
          name="SettingsStack" 
          component={SettingsStack} 
          options={{tabBarIcon: ()=> <Feather name="settings" size={30}/> }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

 

이러면 한 파일 내에서 모든 Navigation이 이뤄진다.

보기에도 더 깔끔해 보이니 좋다.

 

실행 화면

 

전체 코드

App.js

import React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import Home from './src/Home';
import Settings from './src/Settings';
import Hi from './src/Hi';
import Welcome from './src/Welcome';

import Feather from 'react-native-vector-icons/dist/Feather';

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

const HomeStack=()=>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home}/>
      <Stack.Screen name="Hi" component={Hi}/>
    </Stack.Navigator>
  )
}

const SettingsStack=()=>{
  return(
    <Stack.Navigator>
      <Stack.Screen name="Settings" component={Settings}/>
      <Stack.Screen name="Welcome" component={Welcome}/>
    </Stack.Navigator>
  )
}

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="HomeStack" screenOptions={{headerShown:false}}>
        <Tab.Screen 
          name="HomeStack" 
          component={HomeStack} 
          options={{tabBarIcon: ()=> <Feather name="home" size={30}/> }}
        />
        <Tab.Screen 
          name="SettingsStack" 
          component={SettingsStack} 
          options={{tabBarIcon: ()=> <Feather name="settings" size={30}/> }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

export default App;

 

Home.js

import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity} from 'react-native';
import { useNavigation } from '@react-navigation/native';

const Home = () => {
  const navigation=useNavigation();
  
  return (
    <View style={styles.view}>
      <TouchableOpacity onPress={()=> navigation.navigate("Hi")}>
        <Text>Home</Text>
      </TouchableOpacity>
      
    </View>
  );
};

const styles=StyleSheet.create({
    view: {
        backgroundColor:'#fff',
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

export default Home;

 

Hi.js

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';

const Hi = () => {
  return (
    <View style={styles.view}>
      <Text>Hi</Text>
    </View>
  );
};

const styles=StyleSheet.create({
    view: {
        backgroundColor:'#fff',
        flex:1,
        justifyContent:'center',
        alignItems:'center'
    }
})

export default Hi;