React Native로 PDF Viewer 앱 만들기; 8. React Navigation - 2

React Native로 PDF Viewer 앱 만들기

1. React Native 개발 환경 설치

2. react-native-pdf 테스트 앱

3. 화면 개발 - JSX 컴포넌트

4. 화면 개발 - Context API

5. 화면 개발- 팝업 창 (Modal)

6. TypeScript 전환, Jest 추가

7. React Navigation - 1

8. React Navigation - 2

 

일반적인 앱을 보면 상단에 Header Bar는 현재 화면의 명칭, 위치나 추가적인 정보가 있고 Button이 있는 경우는 많이 없고, 있다고 하더라도 꼭 필요한 기능에 대해 제한적으로 버튼이 존재한다. 그에 반해 화면 아래쪽에는 아이콘이나 아이콘이 있는 버튼 존재하는 경우가 많고, 이 아이콘을 통해 앱의 기능을 조작하는 경우가 많다. 물론 상단에 Drawer를 두고 메뉴를 숨겨 놓기도 한다.

 

Stack Navigation이 Header Bar를 표시해 주는 컴포넌트라면, Tab Navigation은 화면 아래에 아이콘과 함께 메뉴를 만드는 컴포넌트라고 생각하면 된다.

c. Tab Navigation을 위한 패키지 설치

Tab Navigation을 사용하기 위해 bottom-tabs 패키지를 먼저 설치한다.

 

npm install @react-navigation/bottom-tabs --save

 

추가로 Tab Navigation에 아이콘을 넣기 위해 벡터 아이콘 패키지를 설치한다.

 

npm install react-native-vector-icons --save

b. Tab Navigation 구현

Navigation관련 내용은 모두 index.tsx에 넣기로 했으니 index.tsx를 수정해서 화면 아래에 아이콘이 나오게 한다.

 

# /src/index.tsx
...
const Tab = createBottomTabNavigator();

const FileListTab = () => {
  return (
    <Tab.Navigator screenOptions={{ headerShown: false }}>
      <Tab.Screen name="FileListPage" component={FileListPage}
        options={{
          title: "Local",
          tabBarIcon: (({ color, size }) => (<Ionicons name={'book'} size={size} color={color} />))
        }} />
      <Tab.Screen name="NetworkPage" component={NetworkPage}
        options={{
          title: "Network",
          tabBarIcon: (({ color, size }) => (<Ionicons name={'cloud-download'} size={size} color={color} />))
        }} />
      <Tab.Screen name="SettingsPage" component={SettingsPage}
        options={{
          title: "Settings",
          tabBarIcon: (({ color, size }) => (<Ionicons name={'options'} size={size} color={color} />))
        }} />
    </Tab.Navigator>
  )
}

const RootStack = createNativeStackNavigator<RootStackParamList>();

const NavStack = () => {
  const { page } = useContext(PageContext);
  return (
    <RootStack.Navigator initialRouteName="FileListTab">
      <RootStack.Screen name="FileListTab" component={FileListTab}
        options={{ title: "PDF Viewer" }} />
      <RootStack.Screen name="ViewerPage" component={ViewerPage}
        options={(({ route }) => ({
          title: route.params.title,
          headerRight: () => (<Pagination page={page} />)

        }))} />
    </RootStack.Navigator>
  )
}

export const MainPage = () => {
  return (
    <PageContextProvider>
      <NavigationContainer theme={CustomTheme}>
        <NavStack />
      </NavigationContainer>
    </PageContextProvider>

  );
}
...

 

createBottomStackNavigator()로 Tab객체를 만들고, 아래와 같이 3개의 아이콘과 아이콘을 눌렀을 때 이동한 화면을 위해 3개의 Screen컴포넌트를 나열했다. 

 

3개의 아이콘으로 보이지만 사실은 3개의 Tab이고 화면을 3등분해서 차지하고 있기 때문에 손으로 터치했을 때 넓은 영역까지 터치해서 선택하는 것이 허용된다. 각각의 Tab에 사용할 TabBarIcon은 Ionicon에서 가져왔는데 아래 페이지를 방문해 보면, Ionicon 외에도 FontAwesome, Material 등 많은 아이콘이 있다. 

react-native-vector-icons directory

이렇게 Tab Navigator를 만들면, 어느 Stack Navigator 화면으로 연결할지를 선택하고 Stack의 Screen 컴포넌트에 등록해 주면 그 경로를 선택하면 아래 아이콘이 있는 Tab이 나타나게 된다. PDF Viewer 앱에서는 앞에서 FileListPage를 Local, Network, Setting의 세 개 Tab으로 나누고 Stack Navigator에 등록했다. 이제 실행해 보면 처음 앱이 시작하면 3개의 Tab이 있는 화면이 나타나고, 파일을 선택해서 ViewerPage로 바뀌면 Tab이 나타나지 않는다.