[헬스 다이어리 앱 개발] 3편 - React Navigation 적용하기

우리가 사용하는 앱들은 클릭이나 스크롤, 드래그 등을 통한 인터렉티브한 화면 이동을 지원한다.

React Navigation를 이용하여 화면 이동을 구현해보자.

 

 

Stack Navigation 적용하기

native용 react-navigation을 설치 해준다.

$ yarn add @react-navigation/native
$ yarn add @react-navigation/native-stack
$ yarn add react-native-screens react-native-safe-area-context

 

앱과 웹의 화면 전환 차이점 중 하나는 앱은 화면을 단순히 이동하는 것이 아니라 새로운 화면을 스택으로 쌓는다는 점이다.

따라서 뒤로가기 버튼을 클릭하면 전 화면으로 이동한다.

유튜브 앱도 뒤로 가기 버튼을 누르다 보면 채널 화면, 검색 화면, 홈 화면 등 우리가 사용한 화면이 역순으로 나온다.

홈 화면 -> 검색 화면 -> 채널 화면 -> 영상 화면이 스택으로 쌓였기 때문이다.

 

react-navigation에서 제공하는 스택 네비게이션을 앱에 적용해보자.

createNativeStackNavigator로 Stack을 만들어주고 스크린 컴포넌트를 만든다.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SignIn from './src/components/SignIn';
import Home from './src/components/Home';

const Stack = createNativeStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="SignIn" component={SignIn} />
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

 

전에 만들었던 SignIn 컴포넌트에서 '로그인 버튼'을 클릭하면 홈 스크린으로 화면 이동을 하게 만든다.

navigation.navigate('Home')

 

설정하고 로그인 버튼을 누르면

SignIn 스크린

 

홈 스크린으로 잘 이동했다.

우리는 스택 네비게이션을 사용했으니, 로그인 스크린은 이 홈 스크린 밑에 스택으로 쌓여있다.

따라서 뒤로가기 버튼을 누르면,

홈 스크린

 

다시 로그인 스크린으로 이동이 잘 된다.

 

 

다음 목표

asyncStorage를 이용해 본격적인 헬스 다이어리 앱에 기능들을 추가해보자.

 

 

참고 자료

React Navigation | React Navigation

React Native Express