[React Native] 버튼을 클릭하여 현재 화면을 캡처해보자❗

Install

$ yarn add react-native-view-shot

 

Import

import ViewShot from 'react-native-view-shot';

 

Code

import ViewShot from 'react-native-view-shot';

function App() {
  const ref = useRef();

  const captureScreen = () => {
    ref.current.capture().then((uri) => {
      console.log('capture complete...', uri);
    });
  };

  return (
    <ViewShot
      style={styles.container}
      ref={ref}
      options={{ fileName: 'Your-File-Name', format: 'jpg', quality: 0.9 }}
    >
      <TouchableOpacity onPress={captureScreen}> // 화면 캡처될 부분을 ViewShot 컴포넌트로 감싸준다❗❗
        <Text> 화면 캡처 </Text>
      </TouchableOpacity>
    </ViewShot>
  );
}

 

💡 useRef

useRef는 특정 컴포넌트를 선택할 때 사용하는 hooks 함수이다.

const ref = useRef(initialValue);

 

1️⃣ useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다.

2️⃣ 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.

3️⃣ 일반적인 유스케이스는 자식에게 명령적으로 접근하는 경우이다.

 

참고 문헌

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