wake-up-neo.com

Wie kann ich Signaturerfassung in React Native durchführen?

Ich versuche zu verstehen, wie ich eine Signaturerfassung in React Native durchführen kann. Meine App wurde mit create-react-native-app und Expo erstellt und ich würde es vorziehen, die App nicht auswerfen zu müssen, damit diese Funktionalität funktioniert.

Wäre es möglich, so etwas in eine Webansicht zu packen? https://github.com/szimek/signature_pad

Ich habe mir dieses Projekt auch angesehen, https://github.com/RepairShopr/react-native-signature-capture aber es erfordert, dass ich die App auswerfe und react-native link verwende.

Suchen Sie nach Ratschlägen oder Vorschlägen zur Implementierung dieser Funktion, während Sie Ihr Projekt so einfach wie möglich gestalten (idealerweise mit der Anwendung create-react-native-app, aber wenn dies nicht möglich ist, kann mir jemand bitte erklären, warum).

5
blueether

Ich weiß, dass es schon eine Weile her ist, aber hier ist ein interessanter Artikel: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac

Warten Sie, aber wie?

Mit „expo-pixi“ können Sie eine Komponente hinzufügen, mit der Sie die Farbe, Dicke und Deckkraft Ihres Pinsels auswählen können. Wenn Ihr Benutzer dann den Finger anhebt, erhalten Sie einen Rückruf. Von dort aus können Sie einen Screenshot der transparenten Ansicht machen oder die Rohpunktdaten abrufen, wenn Sie dies wünschen. 

1
Tim

React Native funktioniert so, dass jede in React Native verfügbare Komponente einer nativen Komponente der zugrunde liegenden Plattform zugeordnet wird.

dh. Ein <Image /> ist eine ImageView in Android und ein UIImageView.h in iOS.

Der Javascript-Code selbst wird auf jeder Plattform in einem Javascript-Thread ausgeführt. Wenn Sie Components in React Native verwenden, gibt es eine Übersetzungsebene, die Informationen von JS an die React Native-Bridge übergibt und dann dazu führt, dass entsprechende native Komponenten erstellt werden.

React Native enthält standardmäßig die folgenden Komponenten: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components was bedeutet, dass nur diese Komponenten angezeigt werden -of-the-box in React Native. Wenn Sie andere Komponenten wünschen, haben Sie zwei Möglichkeiten: Erstellen Sie entweder eine "zusammengesetzte" Komponente, in der Ihre JS-Komponente in andere JS-Komponenten geschrieben wird, oder schreiben Sie Ihre eigene Komponente, wenn für Ihre Funktion eine native Komponente erforderlich ist, die noch nicht von React Native verfügbar gemacht wurde. native "Komponente, um bestimmte native Funktionen für Ihren React Native-Code verfügbar zu machen.

Expo funktioniert so, dass sie React Native und eine Handvoll Komponenten von Drittanbietern verpackt und in ihre Anwendung eingebaut haben. Der Grund, warum Sie keine native Komponente von Drittanbietern verwenden können, die nicht unterstützt wird, besteht darin, dass die App selbst keinen Übersetzungscode hat, um von JS zu einer nativen Android/iOS-Ansicht zu wechseln.

Um das zu tun, was Sie fragen, müssen Sie entweder eine "native" Zeichenkomponente finden, die Expo in ihre Plattform/App aufgenommen hat. OR Sie müssen eine "zusammengesetzte" Zeichnungskomponente finden, die mit anderen Standardkomponenten von React Native (oder anderen von Expo unterstützten Komponenten) erstellt wird.

dh. Unter Android kann ich dies mit einer Canvas-Ansicht erstellen, aber von React Native wird dieses Objekt nicht nativ unterstützt, daher würde ich es wahrscheinlich selbst schreiben usw.

Es ist schwierig für Expo, jede "native" Komponente von Drittanbietern zu unterstützen, da React Native Open Source ist und so schnell durchläuft, dass die meisten in der Community erstellten Komponenten nicht immer auf dem neuesten Stand sind oder dass sie miteinander in Konflikt stehen.

3
ACVM