Come rendere lo zoom iniziale di React Native's ScrollView non essere 1?

Question

Voglio mettere il contenuto (più immagini disposte verticalmente) in un React Native ScrollView (solo iOS per ora, Android verrà dopo) che è più grande dello schermo del telefono, e iniziare a zoomare in modo che sia tutto visibile allo stesso tempo.

ci sono dei buoni esempi di utilizzo ScrollView.scrollResponderZoomTo in una chiamata componentDidMount che riduce lo zoom per adattare i contenuti sullo schermo, qualcosa come

<ScrollView 
    style={{width: 500, height: 1000}} 
    // + whatever other properties make this work required way 
> 
    <View style={{width: 2000, height: 5000}}> 
    <Image style={{width: 2000, height: 2000}} source={.....}/> 
    <Image style={{width: 2000, height: 3000}} source={.....}/> 
    </View> 
</ScrollView> 

Ho provato a impostare la proprietà 'zoomScale', ma che sembra essere ignorato e usa sempre il valore 1.

In base a questo numero (https://github.com/facebook/react-native/issues/2176) esiste una funzione scrollResponderZoomTo che può essere utilizzata, ma quando provo ad usarlo, sembra che non importa quali valori gli diamo zoom fuori troppo lontano e fuori dal centro.

Il campione applicazione F8 dispone di un modulo ZoomableImage (https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/tabs/maps/ZoomableImage.js), che utilizza lo stile Image.resizeMode.contain per fare un'immagine adatta allo schermo, ma che perde la qualità dell'immagine, in modo che quando si ingrandisce diventa sfocata.

Answer 1

Questo non può essere il modo che si voleva fare questo, ma una possibile soluzione:

Si può ottenere l'altezza dei dispositivi e la larghezza (var {height, width} = Dimensions.get('window')) e si conoscono i formati di immagine, quindi si può facilmente calcolare il bisogno larghezza e altezza, chiamiamoli var neededWidth, neededHeight;. È quindi possibile calcolare lo zoom a cui si desidera ridurre lo zoom: var zoom = Math.min(height/neededHeight, width/neededWidth);.

Con questi valori in atto, si può impostare un valore Animated per lo zoom, a partire da 1 termina alle zoom come questo nel tuo componentWillMount:

Animated.timing(
    this.state.animatedZoom, 
    {toValue: zoom} 
).start(); 

Il costruttore sarebbe simile a questa:

constructor(props) { 
    super(props); 
    this.state = { 
    animatedZoom: new Animated.Value(1), 
    }; 
} 

La funzione di rendering sarebbe simile a questa (domanda di trasformare può essere trovato here):

<ScrollView 
    style={{width: 500, height: 1000, transform: [{ scale: this.state.animatedZoom }]}} 
> 
    <View style={{width: 2000, height: 5000}}> 
    <Image style={{width: 2000, height: 2000}} source={.....}/> 
    <Image style={{width: 2000, height: 3000}} source={.....}/> 
    </View> 
</ScrollView>