React Native로 PDF Viewer 앱 만들기; 2. react-native-pdf 테스트

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

4. PDF Viewer 프로젝트

앞에서 안드로이드 스튜디오를 설치하고 Expo로 프로젝트를 생성해서 문제없이 동작하는 것을 확인했으니 이제 PDF Viewer를 위한 프로젝트를 만든다. 이번에는 Sample화면이 없는 blank 템플릿을 사용해서 프로젝트를 생성했다.

 

npx create-expo-app --template blank pdf-viewer

 

pdf를 화면에 표시하기 위해 내가 선택한 react-native-pdf 패키지를 설치하고 이 패키지에서 파일을 읽을 때 사용한다는 react-native-blob-util 도 같이 설치한다.

react-native-pdf

 

npm install react-native-pdf react-native-blob-util --save

 

config-plugins를 설치하면 native 코드를 생성할 때 지정된 패키지의 설정을 자동으로 해 준다.

 

npm install @config-plugins/react-native-pdf @config-plugins/react-native-blob-util --save

 

설치가 완료되면 app.json의 "expo" \ "plugins" 아래에 config-plugins를 추가한다.

 

...
    "plugins": [
      "@config-plugins/react-native-blob-util",
      "@config-plugins/react-native-pdf"
    ],
...

 

react-native-pdf 패키지의 설명에 나와 있듯이 react-native-pdf 패키지를 사용해서 만든 앱은 expo go에서 동작하지 않기 때문에 EAS cloud에서 build 하거나 expo local build를 사용해야 한다. EAS (Expo Application Service)를 사용하려면 eas_cli를

 

npm install -g eas-cli

 

expo local build를 사용하려면 expo-dev-client를 설치해야 한다. 

 

npx expo install expo-dev-client

 

EAS는 Expo의 유료 서비스인데, Git CI/CD 파이프 라인과 연결해서 Expo 앱을 build 하는 작업을 대신해 주기 때문에 편리하지만 개인적으로 사용하려면 한 달에 앱을 30번만 build 할 수 있기 때문에 그 이상을 사용하려면 유료로 사용해야 하고, 한번 build 할 때마다 적지 않은 돈이 지불되기 때문에 개인적으로 사용할 때는 local build를 사용하는 것이 좋다. 

Expo Application Services (EAS)

5. Example 앱 기반으로 실행

먼저 패키지의 동작을 확인하기 위해 react-native-pdf 페이지에 있는 example앱을 실행하기 위해 앞에서 만든 프로젝트에 src 폴더를 추가하고 index.js파일을 만든 다음 react-native-pdf페이지에 있는 내용을 복사하고 저장한다. 한 가지 수정해야 할 부분은 Pdf 컴포넌트를 사용할 때 아래와 같이 "trustAllCerts={false}" 옵션을 지정해야 한다는 점이다.

 

...
            <View style={styles.container}>
                <Pdf
                    trustAllCerts={false}
                    source={source}
                    onLoadComplete={(numberOfPages,filePath) => {
                        console.log(`Number of pages: ${numberOfPages}`);
                    }}
...

 

지정하지 않고 실행하면 아래와 같이 에러가 발생한다.

 

 

index.js에 복사한 PDFExample 컴포넌트를 사용하기 위해 App.js를 아래와 같이 변경한다.

 

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import PDFExample from './src';

export default function App() {
  return (
    <View style={styles.container}>
      <PDFExample />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

 

app.json, src/index.js, App.js파일을 수정했으면 아래 명령으로 local build하고 실행한다.

 

npx expo run:android

 

Java를 설치하지 않았으면 실행이 되지 않기 때문에 "1. React Native 설치하기"를 참조해서 모든 설치 과정을 먼저 마친다. 처음 실행하면 제법 오랜 시간이 걸리고 Build가 성공하면 Expo Go에서 사용할 수 있는 바코드와 URL이 나온다.

 

AVD (안드로이드 가상머신, 에뮬레이터) 를 사용하고 있다면 잠시 기다리면 Expo가 실행되고 앱이 실행된다.