리액트 네이티브(react-native) 화면 이동

해당 글은 react native를 expo로 작업한 내용을 기반으로 작성했습니다.

리액트 네이티브를 제작할 때, 화면을 여러개로 분할하고 이동할 수 있는 기능을 구현할 예정이다.

내가 구현한 화면 이동은 총 2가지가 있다.

1) 2개의 화면 간 이동

• 아래 화면처럼 버튼을 누르면 연결된 다른 스크린으로 이동하고, 뒤로가기 버튼을 누를 시 다시 원래 화면으로 돌아오는 2개의 화면 간의 이동 방법
  

1.설치

우선 이동에 필요한 여러가지 파일을 다운받아야 한다.

npm install @react-navigation/native

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/stack

2.import

설치한 프로그램들을 적용할 수 있게 App.js폴더에 import한다

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

3.스크린 파일 분할

screen폴더를 따로 만들고, 그 안에 작업할 화면을 2개(또는 그 이상) 만든다.

4. 분할 파일 내용 제작

각 화면을 꾸미고 싶은대로 꾸며준다. 만약 아직 꾸미는 방법을 모른다면,

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

function Start() {
  return (
    <View>
      <Text>Start!</Text>
    </View>
  );
}

export default Start;

해당 코드를 붙여넣어준다. 해당 코드는 빈 화면에 Start!라는 텍스트를 띄워준다. 붙여넣을 때, function 옆의 이름과 export할 때의 이름을 지정한 파일명으로 바꾸어준다.

5. App.js에서 파일 불러오기

생성한 파일들을 App.js에서도 사용할 수 있도록 불러오는 작업을 처리한다.

import Start from "./screens/Start";

해당 코드처럼 불러올 파일의 이름과 경로를 넣어서 import한다.

6. stack 선언

createStackNavigator를 저장할 함수를 선언해준다

const Stack = createStackNavigator();

createStackNavigator: Screen과 Navigator의 속성을 포함하는 객체를 반환하는 함수

7. 화면 이동 코드

App.js의 App반환 값에 해당 코드를 넣어준다.

    <NavigationContainer>
      <Stack.Navigator initialRouteName="Start">
        <Stack.Screen name="Start" component={Start} />
        <Stack.Screen name="Main" component={Main} />
      </Stack.Navigator>
    </NavigationContainer>

8. 화면 이동 작업을 수행할 버튼 구현

버튼을 넣어야 하는 해당 파일로 들어가서

function Start({navigation}) {
  return (
    <View>
      <Text>start!</Text>
      <Button 
        title="go to main" 
        onPress={() => navigation.navigate('Main')}
      />
    </View>
  );
}

해당 코드로 변경해준다.
App.js에서 navigation을 받아온 후, 버튼을 눌렀을 때, navigation.gavigate("")를 통해서 해당 파일로 이동하도록 한다.

그럼 끗! 두 화면간의 이동이 잘 되는 것을 확인할 수 있다.

참고한 사이트:

• https://gaemi606.tistory.com/entry/React-Native-React-Navigation%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A6%B0-%EC%9D%B4%EB%8F%99

---

2) 여러 화면 이동

• 아래 화면처럼 하단에 버튼을 누르면 해당 화면으로 이동하는 방법(탭 네비게이션)
  

1. 설치

필요한 파일을 다운받는다.

yarn add @react-navigation/bottom-tabs

npm install @react-navigation/bottom-tabs

혹시 위의 두 화면간 이동을 해보지 않았기 때문에 설치를 진행하지 않은게 있다면 설치를 진행해주면 좋다.

npm install @react-navigation/native

npm install @react-navigation/stack

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

2. import

위처럼 설치한 기능들을 사용할 수 있도록 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";

3. 위와 같은 과정

위와 비슷한 과정을 거치므로 간단하기 설명하자면

• 파일을 나눈다.
• 나눈 파일에 기본 내용을 작성한다.
• 나눈 파일을 사용할 수 있도록 App.js에 import한다.

3. Tab 선언

createBottomTabNavigator를 저장할 함수를 선언해준다

const Stack = createStackNavigator();

createBottomTabNavigator():Screen과 Navigator의 속성을 포함하는 객체를 반환하는 함수, createStackNavigator와 거의 유사하다.

4. 화면 이동 코드

    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="개인 정보" component={Main}/>
        <Tab.Screen name="추가 정보" component={Side}/>
      </Tab.Navigator>
    </NavigationContainer>

그리고 실행해보고 화면간의 이동이 원활한지 확인한다!
이 기능은 이미 하단에 버튼을 생성해주는 기능을 담았기 때문에 따로 스크린 안에 버튼을 구현하지 않아도 된다!

참고한 사이트:

• https://www.devh.kr/2020/React-Navigation-Tab-navigation/

---

오늘은 화면 간 이동에 대해서 알아보았다.
설치 하나 까딱 잘못했다간 오류 폭탄을 맞을 수 있으며,
오타가 나는 경우도 어떤 부분에서 오류가 난건지 정확하게 알려주지 않는 경우가 많으므로 주의해서 진행하는 것을 추천한다.. 내가 그랬기 때문이다.ㅎㅎ

내용이 다소 부실할 수 있으나, 혹시라도 다른 여러가지 오류나 더 좋은 방안이 생길 경우 추가할 예정이다.