Ich möchte Inhalt (mehrere Bilder vertikal angeordnet) in einem React Native ScrollView (iOS nur für jetzt, Android wird später kommen), die größer ist als der Bildschirm des Telefons, und fange an zu verkleinern, so dass es alle sichtbar ist gleichzeitig.
Gibt es gute Beispiele für die Verwendung von ScrollView.scrollResponderZoomTo in einem componentDidMount-Aufruf, der zoomt, um den Inhalt auf dem Bildschirm anzupassen, etwa
%Vor%Ich habe versucht, die 'zoomScale' Eigenschaft zu setzen, aber das scheint ignoriert zu werden und verwendet immer den Wert 1.
Laut diesem Problem ( Ссылка ) gibt es eine scrollResponderZoomTo-Funktion, die verwendet werden kann, aber wann Ich versuche es zu benutzen, es scheint, dass egal welche Werte ich ihm gebe, es viel zu weit und aus der Mitte herauszoomt.
Die F8-Beispielanwendung verfügt über ein ZoomableImage-Modul ( Ссылка ). Das verwendet den Image.resizeMode.contain-Stil, um ein Bild an den Bildschirm anzupassen, aber das verliert die Qualität des Bildes. Wenn Sie hineinzoomen, wird es unscharf.
Dies ist möglicherweise nicht die Art und Weise, wie Sie dies beabsichtigen, aber eine mögliche Lösung:
Sie können die Höhe und Breite des Geräts ermitteln ( var {height, width} = Dimensions.get('window') ) und Sie kennen Ihre Bildgrößen, so dass Sie die benötigte Breite und Höhe leicht berechnen können, nennen wir sie var neededWidth, neededHeight; . Sie können dann den Zoom berechnen, auf den Sie verkleinern möchten: var zoom = Math.min(height / neededHeight, width / neededWidth); .
Wenn diese Werte vorhanden sind, können Sie ein Animiertes festlegen Wert für den Zoom, beginnend bei 1 endend bei zoom gefällt das in deinem componentWillMount :
Der Konstruktor würde so aussehen:
%Vor%Die Render-Funktion würde so aussehen (Referenz für die Transformation finden Sie hier ):
%Vor%Tags und Links javascript ios react-native