So verwenden Sie die React Native-Screenshot-Komponente (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich der Beispielcode der React Native-Screenshot-Komponente vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen.

React Native-Screenshot-Komponente: Sie können den aktuellen Bildschirm erfassen oder entsprechend den Komponenten der aktuellen Seite erfassen. Die aktuelle Seite verfügt über eine Bildkomponente und eine Ansichtskomponente. Sie können wählen, ob Sie die Bildkomponente oder die Ansichtskomponente abfangen möchten. Unterstützt iOS und Android.

Installationsmethode

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

Anwendungsbeispiel

CaptureScreen()-Screenshot-Methode

Erfassen Sie den aktuellen Bildschirm, der mit den vom System bereitgestellten Screenshots übereinstimmt. Es wird nur der auf dem aktuellen Bildschirm angezeigte Seiteninhalt erfasst. Wenn es sich um eine ScrollView handelt, wird der nicht angezeigte Teil nicht abgefangen.

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) fängt den Inhalt der angegebenen Komponente basierend auf dem Komponentenreferenznamen ab.

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)
);

Gibt den Referenznamen der Komponente an, die abgefangen werden muss, und übergibt dann die Ref-Name an die Snapshot-Methode, um den Inhalt der angegebenen Komponente abzufangen. Wenn Sie ScrollView abfangen müssen, müssen Sie nur „full“ an die Snapshot-Methode übergeben. Sowohl die Methode „captureRef“ als auch die Methode „captureScreen“ können Optionen festlegen. Die Beschreibung der Optionen lautet wie folgt: Breite/Höhe: Sie können die Breite und Höhe des endgültig generierten Bildes angeben. Format: Geben Sie das Format des generierten Bildes an: PNG, JPG oder WebM (Android). Der Standardwert ist PNG. Qualität: Die Qualität des Bildes 0,0 - 1,0 (Standard). Ergebnis: der zuletzt generierte Typ, der tmpfile, base64 oder data-uri sein kann. snapshotContentContainer: Wenn auf True gesetzt, wird die Höhe der Komponente dynamisch berechnet. Wenn es sich um eine ScrollView-Komponente handelt, wird die tatsächliche Höhe der gesamten ScrollView abgefangen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So führen Sie vue2.0 und animate.css zusammen (ausführliche Anleitung)

In C# So konvertieren Sie ein Zeichen in eine Ganzzahl

Welche sind die häufig verwendeten UI-Bibliotheken in vue2.0?

So verwenden Sie die Swiper-Komponente, um die Anzeige von Bildern im WeChat Mini-Programm umzuschalten

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die React Native-Screenshot-Komponente (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!