[React Native] view-shot, camera-roll을 이용한 화면 캡처 및 갤러리에 저장

아래와 같이 버튼을 누르면 특정 화면으로 이동 후 현재 화면을 캡처하여 갤러리에 저장하는 기능을 구현해 보았다.

1. camera-roll 설치

 

카메라 롤 즉 갤러리에 특정 사진 혹은 영상을 저장하기 위해서는 사용 권한을 얻어야 한다. 따라서 해당 권한을 허용받기 위해 camera-roll을 설치한다.

npm install @react-native-camera-roll/camera-roll --save

https://github.com/react-native-cameraroll/react-native-cameraroll#readme

GitHub - react-native-cameraroll/react-native-cameraroll: CameraRoll is a react-native native module that provides access to the

2. view-shot 설치

1번에서 갤러리 접근에 대한 권한을 얻었으니 이제 화면을 캡처하는 기능을 구현해야 한다. 따라서 view-shot을 설치한다.

npm install react-native-view-shot

https://github.com/gre/react-native-view-shot

GitHub - gre/react-native-view-shot: Snapshot a React Native view and save it to an image

 

IOS인 경우 1,2번 과정이 끝났다면 pod install을 진행해야 한다!!!

3. 화면 캡처 및 저장 함수 작성

import { captureRef } from 'react-native-view-shot';
import { useCameraRoll } from '@react-native-camera-roll/camera-roll';

const viewRef = useRef(null); //특정 DOM 즉 캡처할 화면의 요소에 접근하기 위한 viewRef
const [photos, getPhotos, save] = useCameraRoll(); //Cameraroll 사용 함수

//화면 캡처 함수
const captureScreenshot = async () => {
    captureRef(viewRef, {
      format: 'png', // png, jpg 둘다 선택 가능
      quality: 1, // 0과 1사이
      // snapshotContentContainer: true, //	참고! 스크롤 뷰까지 캡쳐하는 옵션
	})
      .then((uri) => {
        alert('캡처가 완료되었습니다!');
        console.log('Captured screenshot at', uri);
        save(uri, { type: 'photo' }) // 갤러리에 사진 저장
          .then(() => {
            console.log('이미지 저장 완료');
          })
          .catch((error) => {
            console.error('이미지 저장 에러', error);
            alert('에러가 발생했습니다! 다시 시도해 주세요!');
          });
      })
      .catch((error) => {
        console.error('Error capturing screenshot:', error);
        alert('에러가 발생했습니다! 다시 시도해 주세요!');
      });
};

위 코드에 대해서 간단명료하게 설명하겠다.

viewRef : 특정 Dom에 접근하기 위한 Hook, (캡처할 화면, 요소에 접근하기 위한 viewRef)

captureRef : 화면 캡처를 위한 view-shot 함수

(captureRef에 캡처할 화면의 Dom(ref)을 지정)

format : 사진을 어떤 포맷으로 저장할 건지 ex) jpg, png 중 선택 가능

quality : 사진을 어느 정도의 품질로 저장할 건지 ex) 1 입력 시 최대 품질로 저장

save : 사진을 갤러리에 저장하는 camera-roll 함수

 

위의 코드를 전부 작성했다면 아래와 같이 캡처할 요소들을 담은 최상단 요소에 viewRef를 지정해줘야 한다.

올바른 예시

<ScreenShotView ref={viewRef}>
  <ScreenShotTextView>
  	<ScreenShotText>찰칵</ScreenShotText>
  </ScreenShotTextView>
</ScreenShotView>

 

잘못된 예시

<ScreenShotView>
  <ScreenShotTextView ref={viewRef} >
  	<ScreenShotText>찰칵</ScreenShotText>
  </ScreenShotTextView>
</ScreenShotView>

주의할 점!

• 만약 viewRef를 최상단 요소가 아닌 특정 컴포넌트를 감싸고 있는 View에 지정 시 ScreenShotView에 설정된 배경색 혹은 ScreenShotTextView에  포함되어있지 않은 요소들은 캡처가 되지 않는다. 이해가 되지 않는다면 아래 예시를 참고하면 좋을 것 같다.

최상단 요소에 viewRef를 지정할 경우

 

특정 요소에 viewRef를 지정할 경우

4. 캡처 함수 사용

나는 위에 보여준 예시와 같이 이미지 다운로드 버튼을 누른 경우 화면이 캡처되도록 구현하고 싶었다. 따라서 버튼을 누를 시 화면이 캡처되도록 아래와 같이 TouchableOpacity 태그의 onPress 옵션에 해당 함수를 지정했다.

<HeaderBtn
    onPress={() => {
      scrollToBottom(); // 특정 화면만 캡처하기 위한 화면 이동 함수
      setTimeout(() => {
        captureScreenshot(); // 캡처 실행
      }, 500); // 500ms 대기 후 캡처
    }}
   >
    <DownLoadIcon/>
</HeaderBtn>

 

주의할 점!

• view-shot은 현재 사용자가 보고 있는 화면을 기준으로 캡처된다. 만약 캡처를 원하는 화면에 다운로드 버튼이 없다면 나처럼 캡처를 원하는 특정 화면으로 이동한 후 캡처함수가 실행되도록 코드를 작성해주어야 한다!

이상이다.

 

분명 구현할 때는 어려웠는데 다시 보니 쉬운 느낌..

 

 

 

NSNumber 에러가 발생한다면 아래 글을 참고!..

[React Native] Argument 0 (NSNumber) of RNViewShot captureRef has unspecified nullability but React requires that all NSNumber a