¿Cómo hacer que el zoom inicial de React Native's ScrollView no sea 1?

Quiero poner el contenido (múltiples imágenes dispuestas verticalmente) en React Native ScrollView (iOS por ahora, Android vendrá después) que es más grande que la pantalla del teléfono, y comenzar a networkingucir el zoom para que todo esté visible al mismo time.

¿Hay buenos ejemplos de uso de ScrollView.scrollResponderZoomTo en una llamada componenteDidMount que se aleja para ajustar el contenido de la pantalla, algo así

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

Intenté configurar la propiedad 'zoomScale', pero parece que se ignora y siempre usa el valor 1.

De acuerdo con este problema ( https://github.com/facebook/react-native/issues/2176 ) hay una function scrollResponderZoomTo que se puede usar, pero cuando trato de usarla, parece que no importa qué valores doy Se aleja demasiado lejos y fuera del centro.

La aplicación de ejemplo F8 tiene un module ZoomableImage ( https://github.com/fbsamples/f8app/blob/b5df451259897d1838933f01ad4596784325c2ad/js/tabs/maps/ZoomableImage.js ) que utiliza el estilo Image.resizeMode.contain para que una image se ajuste a la pantalla, pero pierde la calidad de la image, por lo que al acercarla se vuelve borrosa.

Puede que esta no sea la forma en que intentaste hacer esto, pero una posible solución:

Puede get la altura y ancho de los dispositivos ( var {height, width} = Dimensions.get('window') ) y conoce sus tamaños de image, por lo que puede calcular fácilmente el ancho y la altura necesarios, llamémosles var neededWidth, neededHeight; . A continuación, puede calcular el zoom al que desea alejar: var zoom = Math.min(height / neededHeight, width / neededWidth); .

Con estos valores en su lugar, puede establecer un valor Animado para el zoom, comenzando en 1 que termina en el zoom esta manera en su componentWillMount :

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

El constructor se vería así:

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

La function de representación se vería así (puede encontrar una reference para la transformación aquí ):

 <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>