[React Native] Navigation을 이용한 화면 전환 / 네이티브 스택·하단 탭 네비게이터 함께 구현

🖇️ hanium

[React Native] Navigation을 이용한 화면 전환 / 네이티브 스택·하단 탭 네비게이터 함께 구현

기뮨지 2022. 8. 9. 11:57

구현 환경

Mac OS, ARM(M1)

React-native CLI

version 0.68.2

설치

$ cd [프로젝트명]
$ yarn add @react-navigation/native

$ yarn add react-native-screens react-native-safe-area-context

$ cd ios
$ pod install

네비게이터에 익숙하지 않아서 처음에 스택을 분리해서 작성했다.

App.js에서 네비게이터를 사용하고,

MainScreen.js에서 하단탭 네비게이터를 사용했다.

네비게이터가 분리되어 있어 구조가 한 눈에 보이지 않아서 바꾸고 싶었다.

App.js (수정 전)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import MainScreen from './android/screens/MainScreen'
import LikeScreen from './android/screens/LikeScreen'
import Cafe from './android/screens/Category/Cafe'
import Restaurant from './android/screens/Category/Restaurant'
import Drink from './android/screens/Category/Drink'
import Etc from './android/screens/Category/Etc'
import Random from './android/screens/Category/Random';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Main"
          component={MainScreen}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Like"
          component={LikeScreen}
        />
        <Stack.Screen
          name="Cafe"
          component={Cafe}
        />
        <Stack.Screen
          name="Restaurant"
          component={Restaurant}
        />
        <Stack.Screen
          name="Drink"
          component={Drink}
        />
        <Stack.Screen
          name="Etc"
          component={Etc}
        />
        <Stack.Screen
          name="Random"
          component={Random}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

MainScreen.js (수정 전)

import * as React from 'react';
import {Text, TextInput, View, Button, Image, StyleSheet, ScrollView, TouchableOpacity} from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons'
import { useNavigation } from '@react-navigation/native';

import MapScreen from './MapScreen';
import CourseScreen from './CourseScreen';
import MyPageScreen from './MyPageScreen';

const Tab = createBottomTabNavigator();

function MainScreen(){
    return (
        <Tab.Navigator initialRouteName="Home" screenOptions={{tabBarActiveTintColot: '#fd8c00'}}>
            <Tab.Screen name="Home" component={HomeScreen} options={{
            title: 'Home',
            tabBarIcon: ({color, size}) => (
                <Icon name="home" color={color} size={size} />
            ),
            }}/>
            <Tab.Screen name="Map" component={MapScreen} options={{
            title: 'Map',
            tabBarIcon: ({color, size}) => (
                <Icon name="map" color={color} size={size} />
            ),
            }}/>
            <Tab.Screen name="Course" component={CourseScreen} options={{
            title: 'Course',
            tabBarIcon: ({color, size}) => (
                <Icon name="like" color={color} size={size} />
            ),
            }}/>
            <Tab.Screen name="My Page" component={MyPageScreen} options={{
            title: 'My Page',
            tabBarIcon: ({color, size}) => (
                <Icon name="settings" color={color} size={size} />
            ),
            }}/>
      </Tab.Navigator>
    );
}

function LikeButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Like', { id: 1, })}>
          <Text style={{fontSize: 18, marginHorizontal: 10, marginVertical: 10}}>❤️</Text>
        </TouchableOpacity>
    );
}

function CafeButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Cafe', { id: 2, })}>
          <Text style={{fontSize: 40, marginHorizontal: 20, marginVertical: 10}}>🧁</Text>
          <Text style={{fontSize: 16, marginHorizontal: 30}}>Cafe</Text>
        </TouchableOpacity>
    );
}

function RestaurantButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Restaurant', { id: 3, })}>
          <Text style={{fontSize: 40, marginHorizontal: 23, marginVertical: 10}}>🍴</Text>
          <Text style={{fontSize: 16, marginHorizontal: 8}}>Restaurant</Text>
        </TouchableOpacity>
    );
}

function DrinkButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Drink', { id: 4, })}>
          <Text style={{fontSize: 40, marginHorizontal: 20, marginVertical: 10}}>🍺</Text>
          <Text style={{fontSize: 16, marginHorizontal: 25}}>Drink</Text>
        </TouchableOpacity>
    );
}

function EtcButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Etc', { id: 5, })}>
          <Text style={{fontSize: 40, marginHorizontal: 20, marginVertical: 10}}>👀</Text>
          <Text style={{fontSize: 16, marginHorizontal: 33}}>Etc</Text>
        </TouchableOpacity>
    );
}

function RandomImage() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Random', { id: 6, })}>
          <Image style={styles.place} source={require('../assets/logo.png')}/>
          <View style={styles.info}>
            <Text>제목</Text>
            <Text>설명블라블라</Text>
          </View>
        </TouchableOpacity>
    );
}

function HomeScreen() {
    return(
        <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
            <View style={styles.searchBar}>
                <Image style={styles.logoStyle} source={require('../assets/logo.png')}/>
                <TextInput style={styles.input}
                placeholder="#검색어를 입력하세요."
                autoCapitalize="none" />
                <TouchableOpacity activeOpacity={0.8}>
                    <Text style={{fontSize: 18, marginHorizontal: 5}}>🔎</Text>
                </TouchableOpacity>
                <LikeButton style={styles.buttonStyle}/>
            </View>
            <View style={styles.locationBar}>
                <Text>용산구 청파로 47길 100 📌</Text>
            </View>
            <View style={styles.categoryBar}>
                <CafeButton style={styles.category}/>
                <RestaurantButton style={styles.category}/>
                <DrinkButton style={styles.category}/>
                <EtcButton style={styles.category}/>
            </View>
            <View style={{flex: 0.4, margin: 15}}>
                <Text style={styles.randomText}>무작위 추천</Text>
            </View>
            <View style={styles.randomBar}>
                <ScrollView horizontal={false} style={styles.list}>
                    <View style={styles.stylegridView}>

                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>

                    </View>
                </ScrollView>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    이하 생략
});


export default MainScreen;

MainScreen에 홈화면 UI를 만들어뒀는데,

홈과 메인을 같은 화면으로 헷갈려서 코드를 위처럼 작성한 것 같다.

이렇게 화면을 구성하면 홈화면에서

<Like, Cafe, Restaurant, Drink, Etc, Random>

페이지로 화면을 이동할 수는 있지만

나머지 하단탭인 지도, 코스, 마이페이지의 각 화면에서

그 내부의 다른 페이지로 이동이 불가능하다.

어차피 나중에 팀원들끼리 만든 화면을 서로 연결해야 하기 때문에

내가 전체 네비게이터 방향성을 잡고

내 걸 팀원들에게 전달하는게 협업에 좋을 것 같아서

App.js와 전체적인 js 파일 구조들을 바꿨다.

네비게이션은 머릿속으로만 구상하니 헷갈려서

아래처럼 구성도를 그려서 App.js에 반영했다.

가게 페이지들은 이후에 백엔드와 연동해야 해서

이전에 각각 <Cafe, Restaurant, Drink, Etc> 페이지를 만들어뒀는데

그걸 삭제하고 빈 Place 페이지 하나로 통일해서 이동하게 했다.

로그인 화면은 다른 팀원이 수정 중이라

빈 화면에 버튼 하나를 두고

버튼을 클릭하면 메인으로 이동하도록 했다.

MainScreen에 작성했던 하단탭 네비게이터를 App.js로 합치고,

Main에서 <Like, Cafe, Restaurant, Drink, Etc, Random>

각 페이지로 이동할 수 있도록 작성했다.

App.js (수정 후)

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons'

import Login from './android/screens/Login/Login'
import HomeScreen from './android/screens/HomeScreen';
import LikeScreen from './android/screens/LikeScreen'
import PlaceScreen from './android/screens/PlaceScreen';
import MapScreen from './android/screens/MapScreen';
import CourseScreen from './android/screens/CourseScreen';
import MyPageScreen from './android/screens/MyPageScreen';


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

function Main(){
    return (
        <Tab.Navigator initialRouteName="Home" screenOptions={{tabBarActiveTintColot: '#fd8c00'}}>
            <Tab.Screen name="Home" component={HomeScreen} options={{
            title: 'Home',
            tabBarIcon: ({color, size}) => (
                <Icon name="Home" color={color} size={size} />
            ),
            headerShown: false
            }}/>
            <Tab.Screen name="Map" component={MapScreen} options={{
            title: 'Map',
            tabBarIcon: ({color, size}) => (
                <Icon name="Place" color={color} size={size} />
            ),
            }}/>
            <Tab.Screen name="Course" component={CourseScreen} options={{
            title: 'Course',
            tabBarIcon: ({color, size}) => (
                <Icon name="Check" color={color} size={size} />
            ),
            }}/>
            <Tab.Screen name="My Page" component={MyPageScreen} options={{
            title: 'My Page',
            tabBarIcon: ({color, size}) => (
                <Icon name="Person" color={color} size={size} />
            ),
            }}/>
      </Tab.Navigator>
    );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen
          name="Sign In"
          component={Login}
        />
        <Stack.Screen
          name="Main"
          component={Main}
          options={{headerShown: false}}
        />
        <Stack.Screen
          name="Like"
          component={LikeScreen}
        />
        <Stack.Screen
          name="Cafe"
          component={PlaceScreen}
        />
        <Stack.Screen
          name="Restaurant"
          component={PlaceScreen}
        />
        <Stack.Screen
          name="Drink"
          component={PlaceScreen}
        />
        <Stack.Screen
          name="Etc"
          component={PlaceScreen}
        />
        <Stack.Screen
          name="Random"
          component={PlaceScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

HomeScreen.js (수정 후)

import * as React from 'react';
import {Text, TextInput, View, Image, StyleSheet, ScrollView, TouchableOpacity} from 'react-native'
import { useNavigation } from '@react-navigation/native';

function LikeButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Like')}>
          <Text style={{fontSize: 18, marginHorizontal: 10, marginVertical: 10}}>❤️</Text>
        </TouchableOpacity>
    );
}

function CafeButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Cafe')}>
          <Text style={{fontSize: 40, marginHorizontal: 20, marginVertical: 10}}>🧁</Text>
          <Text style={{fontSize: 16, marginHorizontal: 30}}>Cafe</Text>
        </TouchableOpacity>
    );
}

function RestaurantButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Restaurant')}>
          <Text style={{fontSize: 40, marginHorizontal: 23, marginVertical: 10}}>🍴</Text>
          <Text style={{fontSize: 16, marginHorizontal: 8}}>Restaurant</Text>
        </TouchableOpacity>
    );
}

function DrinkButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Drink')}>
          <Text style={{fontSize: 40, marginHorizontal: 20, marginVertical: 10}}>🍺</Text>
          <Text style={{fontSize: 16, marginHorizontal: 25}}>Drink</Text>
        </TouchableOpacity>
    );
}

function EtcButton() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Etc')}>
          <Text style={{fontSize: 40, marginHorizontal: 20, marginVertical: 10}}>👀</Text>
          <Text style={{fontSize: 16, marginHorizontal: 33}}>Etc</Text>
        </TouchableOpacity>
    );
}

function RandomImage() {
    const navigation = useNavigation();
    return (
        <TouchableOpacity activeOpacity={0.8} onPress={() => navigation.push('Random')}>
          <Image style={styles.place} source={require('../assets/logo.png')}/>
          <View style={styles.info}>
            <Text>제목</Text>
            <Text>설명블라블라</Text>
          </View>
        </TouchableOpacity>
    );
}

function HomeScreen() {
    return(
        <View style={{flex: 1, flexDirection: 'column', backgroundColor: 'white'}}>
            <View style={styles.searchBar}>
                <Image style={styles.logoStyle} source={require('../assets/logo.png')}/>
                <TextInput style={styles.input}
                placeholder="#검색어를 입력하세요."
                autoCapitalize="none" />
                <TouchableOpacity activeOpacity={0.8}>
                    <Text style={{fontSize: 18, marginHorizontal: 5}}>🔎</Text>
                </TouchableOpacity>
                <LikeButton style={styles.buttonStyle}/>
            </View>
            <View style={styles.locationBar}>
                <Text>용산구 청파로 47길 100 📌</Text>
            </View>
            <View style={styles.categoryBar}>
                <CafeButton style={styles.category}/>
                <RestaurantButton style={styles.category}/>
                <DrinkButton style={styles.category}/>
                <EtcButton style={styles.category}/>
            </View>
            <View style={{flex: 0.4, margin: 15}}>
                <Text style={styles.randomText}>무작위 추천</Text>
            </View>
            <View style={styles.randomBar}>
                <ScrollView horizontal={false} style={styles.list}>
                    <View style={styles.stylegridView}>

                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>
                    <RandomImage/>

                    </View>
                </ScrollView>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    이하 생략
});


export default HomeScreen;

이전에 비해 코드가 훨씬 깔끔해졌고,

로그인-메인, 메인-각 페이지로의 연결도 가능하다.

완성 화면은 다음과 같다.

로그인 - 메인 - Cafe

저작자표시 비영리 (새창열림)