React Native/ iOS ] 리엑트 네비게이션 (React Navigation) 시작하기

iOS앱에서 화면간 전환을 담당하는 기능을 네비게이션이라고 칭한다. 리엑트 네이티브에서는 공식적으로 네비게이션 처리를 제공하지 않기 때문에 네이게이션 기능을 사용하기 위해서는 써드파티 라이브러리를 사용해야한다. 그 중 널리 쓰이고 있는 React Navigation(reactnavigation.org/)이라는 서드파티 모듈을 공부해 보려한다. 

 

사용에 앞서 React Navigation 설치하고 실행까지 해보는 것을 알아 보겠다.

 

1. 리엑트 네이티브 앱 프로젝트 생성하기

일단 리엑트 네이티브 앱 프로젝트를 적절한 위치에 생성해 준다. 

npx react-native init myNav

 

2. React Navigation  관련 모듈 패키지 설치하기

React Navigation은 서드파티이므로 따로 패키지를 설치해 줘야 한다. 

npm install @react-navigation/native

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

 

3. cocoapods로 링크 하기

ios앱을 개발한다면 cocoapods로 라이브러리를 링크를 설정 해줘야 한다. 다음 명령어를 통해 링크가 가능하다.

npx pod-install ios

 

4. App.js 위에 import 추가하기

App.js 최상위에 다음과 같이 모듈을 import 해준다.

import 'react-native-gesture-handler';

 

5. 예제코드 (App.js) 실행

리엑트 네이티브 템플릿 프로젝트의 App.js파일의 내용을 다음과 같이 바꿔본다.

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

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

그리고 다음 명령어를 통해 앱을 실행한다.

npx react-native run-ios

앱을 실행하면 하얀 화면에 아무것도 나오지 않는다. 이렇게 실행되면 정상적으로 빌드가 완료 된 것이다.

6. 예제 코드 2 (Hello React Navigation)

하얀화면만 출력되므로 네비게이션 뷰가 제대로 나오는지 알 수가 없다. React Navigation 홈페이지에서 Hello React Navigation예제(reactnavigation.org/docs/hello-react-navigation)를 실행해 보자.

실행에 앞서 다음 모듈을 추가로 설치 해준다.

npm install @react-navigation/stack

 

App.js 파일의 내용을 다음과 같이 수정해 준다.

// In App.js in a new project
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

실행 결과 Home이라는 타이틀과 함께 네비게이션 타이틀이 표시되는 것을 볼 수 있다.

 

참고 

reactnavigation.org/docs/getting-started