iOS/Android-Bildauswahl mit Unterstützung für Kamera

Blog

iOS/Android-Bildauswahl mit Unterstützung für Kamera

React-native-customized-image-picker .iOS/Android-Bildauswahl mit Unterstützung für Kamera, Videokomprimierung, mehrere Bilder und Zuschneiden



Ergebnis

Python auf dem iPad lernen

Verwendungszweck



Version verwenden

version >= 0.0.20

Bibliothek importieren



import ImagePicker from 'react-native-customized-image-picker';

Aus Galerie auswählen

Einzelbildauswahl aufrufen

ImagePicker.openPicker({}).then(image => { console.log(image); });

Mehrere Bilderauswahl aufrufen

ImagePicker.openPicker({ multiple: true }).then(images => { console.log(images); });

Aus Kamera auswählen

ImagePicker.openCamera({ width: 300, height: 400, cropping: true }).then(image => { console.log(image); });

Video auswählen

ImagePicker.openCamera({ width: 300, height: 400, isVideo: true }).then(image => { console.log(image); });

Optionale Reinigung

Das Modul erstellt tmp-Images, die in Zukunft automatisch bereinigt werden. Wenn Sie die Bereinigung erzwingen möchten, können Sie |_+_| . verwenden um alle tmp-Dateien zu bereinigen. Löschen Sie die geschnittenen, komprimierten und fotografierten Bilder.

clean

Objekt anfordern

Eigentum Typ Beschreibung
Zuschneiden bool (Standardwert false) Zuschneiden aktivieren oder deaktivieren
Breite Nummer (Standard 200) Breite des Ergebnisbildes bei Verwendung mit |_+_| Möglichkeit
Höhe Nummer (Standard 200) Höhe des Ergebnisbildes bei Verwendung mit |_+_| Möglichkeit
mehrere bool (Standardwert false) Aktivieren oder deaktivieren Sie die Mehrfachbildauswahl
isKamera bool (Standardwert false) Kameraauswahl aktivieren oder deaktivieren
openCameraOnStart bool (Standardwert false) Aktivieren oder deaktivieren Sie das Einschalten der Kamera beim Start
RückkehrAfterShot bool (Standardwert false) Direkt aufgenommene Bilder aktivieren oder deaktivieren
multipleShot bool (Standardwert false) Aktivieren oder deaktivieren Sie Bild mehrmals aufnehmen
maximale Größe Nummer (Standard 9) Bildanzahl einstellen
spanCount Nummer (Standard 3) Stellen Sie die Anzahl der Bilder ein, die in einer Reihe angezeigt werden
includeBase64 bool (Standardwert false) Aktivieren oder deaktivieren Sie includeBase64
komprimierenQualität Zahl([0-100]) Bildkomprimierungsrate
minCompressSize Nummer Festlegen der Mindestgröße der komprimierten Datei (kb)
Titel Schnur Legt den Titel der Seite fest
isVideo bool (Standardwert false) Nur Video aktivieren oder deaktivieren
isSelectBoth bool (Standardwert false) Aktivieren oder deaktivieren Sie Bilder und Videos auswählen
isHidePreview bool (Standardwert false) Versteckte Vorschauschaltfläche aktivieren oder deaktivieren
isHideVideoPreview bool (Standardwert false) Aktivieren oder deaktivieren Sie die Schaltfläche für die versteckte Videovorschau
isPlayGif bool (Standardwert false) Gif abspielen aktivieren oder deaktivieren
ausblendenCropBottomControls bool (Standardwert true) Zuschneidesteuerung aktivieren oder deaktivieren
AspektVerhältnisX Nummer (Standard 1) Legen Sie ein Seitenverhältnis X für Zuschneidegrenzen fest.
AspektVerhältnisY Nummer (Standard 1) Legen Sie ein Seitenverhältnis Y für Zuschneidegrenzen fest.
videoQuality Nummer (Standard 1) 1: hoch 0: niedrig.
imageLoader Zeichenfolge (Standard GLIDE) Setzt den imageLoader der Seite,enum(PICASSO,GLIDE,FRESCO,UNIVERSAL)

Antwortobjekt

Eigentum Typ Beschreibung
Weg Schnur Ausgewählter Bildspeicherort
Breite Nummer Ausgewählte Bildbreite
Höhe Nummer Ausgewählte Bildhöhe
Mime Schnur Ausgewählter Bild-MIME-Typ (image.jpeg'>number Ausgewählte Bildgröße in Byte
Daten base64 Optionale base64-selektierte Dateidarstellung

Installieren

ImagePicker.clean() .then(() => { console.log('removed all tmp images from tmp directory'); }) .catch(e => { console.log(e); });

Berechtigung hinzufügen /android/app/src/main/AndroidManifest.xml

cropping

Schritte nach der Installation

Android
  • Wenn Sie die vorherige Version von rn49 verwenden und eine Ausnahme wie folgt erhalten:

    cropping

    um die abhängige Klassenbibliothek zu ändern:

    npm i react-native-customized-image-picker --save react-native link react-native-customized-image-picker

    ändern zu

  • Einstellen von compileSdkVersion und buildToolsVersion

    java.lang.AbstractMethodError: abstract method 'void com.facebook.imagepipeline.producers.ProducerListener.onUltimateProducerReached(java.lang.String, java.lang.String, boolean)'

ios

Schritt 1:

Öffnen Sie in Xcode Info.plist und fügen Sie den String-Schlüssel |_+_| . hinzu mit Wert, der beschreibt, warum Sie Zugriff auf Benutzerfotos benötigen. Mehr Infos hier https://forums.developer.apple.com/thread/62229 . Je nachdem, welche Funktionen Sie verwenden, benötigen Sie möglicherweise auch |_+_| und |_+_| Schlüssel.

Wo kann ich Zap-Coins kaufen?

Schritt 2:

reaktionsfähig >= 0.60 mit Kakaobohnen

  • Führen Sie Folgendes aus:
compile 'com.facebook.fresco:fresco:1.3.0' compile 'com.facebook.fresco:animated-gif:1.3.0'

Danach verwenden Sie |_+_|. Verwende nicht compile 'com.facebook.fresco:fresco:1.0.1' compile 'com.facebook.fresco:animated-gif:1.0.1' .

Lokalen QBImagePicker verwenden

Es wird empfohlen, den lokal bereitgestellten QBImagePicker-Pod zu verwenden, da er nur wenige Verbesserungen gegenüber der Originalversion enthält.

android { compileSdkVersion 28 buildToolsVersion '28.0.3' }
Handbuch
  • Ziehen Sie den Ordner ios/ImageCropPickerSDK per Drag & Drop in Ihr xcode-Projekt. (Stellen Sie sicher, dass bei Bedarf Elemente kopieren aktiviert ist.)
  • Klicken Sie auf die Registerkarte Allgemein des Projekts
    • Unter |_+_| einstellen |_+_| nach |_+_|
    • Unter |_+_| klick |_+_| und füge |_+_| . hinzu und |_+_|

Öffnen Sie in Xcode Info.plist und fügen Sie den String-Schlüssel |_+_| . hinzu mit Wert, der beschreibt, warum Sie Zugriff auf Benutzerfotos benötigen. Mehr Infos hier https://forums.developer.apple.com/thread/62229 . Je nachdem, welche Funktionen Sie verwenden, benötigen Sie möglicherweise auch |_+_| und |_+_| Schlüssel.

Kakaofruchtbenutzer
  • |_+_| . hinzufügen in Podfile (!wichtig)
  • |_+_| . hinzufügen und |_+_| zu Podfile
Nicht-Cocoapods-Benutzer
  • Ziehen Sie den Ordner ios/ImageCropPickerSDK per Drag & Drop in Ihr xcode-Projekt. (Stellen Sie sicher, dass bei Bedarf Elemente kopieren aktiviert ist.)
  • Klicken Sie auf die Registerkarte Allgemein des Projekts
    • Unter |_+_| einstellen |_+_| nach |_+_|
    • Unter |_+_| klick |_+_| und füge |_+_| . hinzu und |_+_|

Themen einstellen

Sprache einstellen

  • Fügen Sie die Datei gallery_strings.xml im Verzeichnis yourProjectandroidappsrcmain esvalues ​​hinzu.
NSPhotoLibraryUsageDescription

Einstellungsstil

  • modifizieren Sie die Datei style.xml im Verzeichnis yourProjectandroidappsrcmain esvalues.
NSCameraUsageDescription
  • modifizieren Sie die Datei AndroidManifest.xml .
NSMicrophoneUsageDescription
Wichtige Inhalte
  • xmlns:tools= http://schemas.android.com/tools
  • tools:replace=android:theme
  • android:theme=@style/AppTheme
  • cn.finalteam.rxgalleryfinal.ui.activity.MediaActivity Theme_Light.Default

Wie es funktioniert?

Es ist im Grunde ein Wrapper um einige Bibliotheken

Android

ios

  • QBImagePickerController
  • RSKImageCropper

Download-Details:

Autor: Shijingsh

GitHub: https://github.com/shijingsh/react-native-customized-image-picker

Projekte für Flugmanagementsysteme

#reagieren-native #programmierung