React Native 스크린샷 구성요소 사용 방법(자세한 튜토리얼)-JS 튜토리얼-php.cn

React Native 스크린샷 구성요소 사용 방법(자세한 튜토리얼)

亚连

풀어 주다： 2018-06-22 14:25:15

원래의

2690명이 탐색했습니다.

이 글은 주로 React Native 스크린샷 컴포넌트의 샘플 코드를 소개하고 있습니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집기를 따라 살펴보겠습니다

React 네이티브 스크린샷 구성 요소: React-native-view-shot, 현재 화면을 캡처하거나 현재 페이지의 구성 요소에 따라 캡처하도록 선택할 수 있습니다. 그림 구성 요소 및 보기 구성 요소를 사용하는 경우 스크린샷 구성 요소 또는 보기 구성 요소를 선택할 수 있습니다. iOS와 안드로이드를 지원합니다.

설치 방법

npm install react-native-view-shot
react-native link react-native-view-shot

로그인 후 복사

사용 예

captureScreen() 스크린샷 방법

현재 화면을 캡처합니다. 이는 시스템과 함께 제공되는 스크린샷과 일치합니다. 현재 화면에 표시되는 페이지 내용만. 캡처됩니다. ScrollView인 경우 표시되지 않은 부분은 가로채지 않습니다.

import { captureScreen } from "react-native-view-shot";
captureScreen({
 format: "jpg",
 quality: 0.8
})
.then(
 uri => console.log("Image saved to", uri),
 error => console.error("Oops, snapshot failed", error)
);

로그인 후 복사

captureRef(view, options) 컴포넌트 참조 이름을 기준으로 캡처

import { captureRef } from "react-native-view-shot";
render() {
   return (
 <ScrollView ref="full">
  <View ref="form1”>
   </View>
         <View ref="form2”>
   </View>
 </ScrollView>
);
}
snapshot = refname => () =>
captureRef(refname, {
 format: "jpg",
 quality: 0.8,
 result: "tmpfile",
 snapshotContentContainer: true
})
.then(
 uri => console.log("Image saved to", uri),
 error => console.error("Oops, snapshot failed", error)
);

로그인 후 복사

캡처해야 하는 컴포넌트의 참조 이름을 지정한 후 해당 참조 이름을 snapshot 메서드에 전달하여 지정된 컴포넌트의 내용을 캡처합니다. . ScrollView를 가로채야 하는 경우 스냅샷 메서드에 "full"만 전달하면 됩니다. CaptureRef 메소드와 CaptureScreen 메소드 모두 옵션을 설정할 수 있습니다. 옵션은 다음과 같습니다. 너비/높이: 최종 생성된 이미지의 너비와 높이를 지정할 수 있습니다. 형식: 생성된 이미지의 형식을 png, jpg 또는 webm(Android)으로 지정합니다. 기본값은 png입니다. 품질: 이미지 품질 0.0 - 1.0(기본값). 결과: 마지막으로 생성된 유형(tmpfile, base64 또는 data-uri). snapshotContentContainer: True로 설정하면 구성 요소의 높이가 동적으로 계산됩니다. ScrollView 구성 요소인 경우 전체 ScrollView의 실제 높이가 가로채어집니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.