React Native A4 Size Print View

React Native A4 Size Print View

리액트 네이티브에서 실물 A4 사이즈를 얻기위해 View를 구성하는 방법.

1. 현실 크기 구하기

IOS에서는 pixel 이라는 단위를 사용하고 , 안드로이드에선 dp 라는 단위를 사용한다.

ReactNative의 단위를 현실크기에 맞추기 위한 식은 아래와 같다.

 import { PixelRatio } from "react-native";
 ​
 export function _getCmToRealPixel(cm) {
     return PixelRatio.roundToNearestPixel(Number(cm) * 37.795276)
 }

roundToNearestPixel

레이아웃 크기 (dp)를 정수 픽셀 수에 해당하는 가장 가까운 레이아웃 크기로 반올림합니다. 예를 들어 PixelRatio가 3 인 기기 PixelRatio.roundToNearestPixel(8.4) = 8.33에서 정확히 (8.33 * 3) = 25 픽셀에 해당합니다.

2. A4 사이즈 뷰 생성

A4 사이즈의 뷰를 먼저 생성하는 이유는, 실물 크기로 뷰를 생성하더라도 프린트시 비율로 늘려서 프린트하는 경우가 많으므로 여백을 둠으로써 강제로 사이즈를 맞추기 위해서이다.

 <View style={{ width: _getCmToRealPixel(21), height: _getCmToRealPixel(29.7), alignItems: 'center',justifyContent:'center' }}>
   // ...
 </View>

3. 5cm 크기의 사각형 생성

(2)에서 생성한 View 내부에 아래 코드를 넣고 프린트를 해보면 약 5cm 크기의 검은 사각형이 정상적으로 프린트됨을 확인할 수 있다.

여백설정이나 기타 설정에 의해 조금 다를 수 있음

 <View style={{ width: _getCmToRealPixel(5), height: _getCmToRealPixel(5), backgroundColor: '#000000' }}>
 </View>

4. 화면 스크린샷 및 저장

react-native-view-shot 를 사용하면 특정 View를 스크린샷할 수 있고

@react-native-community/cameraroll 를 사용하면 이미지를 갤러리에 저장할 수 있다.