Instagram Stil Pan/Zoom mit React india

ich nach einem Weg suchen Bild Schwenken/Zoomen ähnlich wie Instagram zu implementieren Mutter mit Reagieren:Instagram Stil Pan/Zoom mit React india

oder sehen: https://www.youtube.com/watch?v=Ahzz3ik-EvQ

I‘ Sie haben Komponenten wie ViewTransformer in einer FlatList versucht, aber Elemente, die weiter oben in der App-Komponentenstruktur angezeigt werden (z. B. eine TabNavigation-Leiste), bleiben im Vordergrund über dem vergrößerten Bild.

Weiß jemand oder haben Sie irgendwelche Tipps, wie dies mit React Native implementiert werden könnte?

Dank

UPDATE

Facebook Yoga (Reagiert Layout-Engine) hat freundlicherweise einen Feature-Request für die Position zu ermöglichen, wieder geöffnet: feste Unterstützung. Ein solches Feature würde es einfach machen, die Rendering-Engine darüber zu informieren, wie ein Element relativ zum Bildschirm und nicht zu einer übergeordneten Komponente positioniert werden soll. Dies würde Komponenten mit einer festen Position ermöglichen, einen zIndex relativ zur Wurzel zu haben. Ich glaube, ein solches Feature würde dieses Problem leicht lösen.

https://github.com/facebook/yoga/issues/264

Quelle

2017-05-12 Francesco

Das wie maßgeschneiderte Bildansicht sieht, wie es https://www.npmjs.com/package/react-native-photo-view –

Danke für die Zeiger @TGMCians ist habe ich versucht, die vorgeschlagene Komponente, aber es immer noch zoomt nur im Kontext der FlatList-Zeile und nicht auf dem gesamten Bildschirm: siehe https://ibb.co/hW5ao5 Es scheint keine Position zu geben: fixed-Attribut in reactive native, so dass ein Element relativ zu positioniert werden kann der Bildschirm (wird effektiv ein Wurzelelement) und nicht das Elternelement wie bei Position: absolut. Ich versuchte auch mit react-native-root-Geschwister, um das Bild zu Beginn einer Prise/Zoom mit einem Root-Element zu tauschen, aber ich konnte nicht das ausgelagerte Element, um die Kontrolle über die Gesten zu bekommen. – Francesco

Ich verstehe. Lets warten Antwort der Leute :) Ich habe nicht versucht, dies in reagieren native BTW Ich fragte Ihre Frage auf Facebook-Gruppe, vielleicht bekommen Sie Aufmerksamkeit auf Ihre Frage schnell –

können Sie Scroll verwenden für die Umsetzung Prise Zoom nur das Bild setzen, wie unten und die maximumZoomScale und minimumZoomScale Werte gesetzt. Es funktioniert nur in iOS.

<ScrollView maximumZoomScale={5} scrollEnabled={true} minimumZoomScale={1} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false}> 
<Image 
    style={{height:100, width: 300}} 
    source={{ uri: "https://img0.gaadicdn.com/images/car- 
      images/496x206/Lamborghini/Lamborghini-Huracan/Lamborghini- 
      Huracan-Performante/047.jpg" 
     }} 
    /> 
</ScrollView>

Quelle

2017-05-12 10:43:14

Hallo @Soraj danke für den Tipp :-) Ich habe Ihren Vorschlag in einer FlatList versucht Zeile, aber es zoomt nur noch in der Zeile. Ich suche nach einer Möglichkeit, React anzuweisen, das Element relativ zum Stamm und nicht zum unmittelbaren Elternelement (wie der Zeile) zu positionieren, damit es beim Zoomen durch den relativ zum Stamm liegenden zIndex in die vorderste Reihe aller Komponenten gelangt (dh andere Zeilen, Header, Navigationsleisten). – Francesco

Hallo @Francesco Ich denke, dass diese Komponente für Sie hilfreich sein kann https://shoutem.github.io/docs/ui-toolkit/components/lightbox –

Instagram Stil Pan/Zoom mit React india

Antwort

Verwandte Themen