L'immagine 'contain' resizeMode non funziona in react native

Question

Sto usando React Native su un dispositivo Android reale. Quando si crea un'applicazione molto semplice con solo la seguente funzione di rendering del componente applicazione principale ...

render() { 
    <Image 
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}} 
    style={ 
     { 
     flex: 1, 
     resizeMode: 'contain', 
     backgroundColor: 'yellow' 
     }   
    } /> 
} 

ottengo il seguente risultato sul mio dispositivo:

Come si può vedere l'intero sfondo è giallo in modo tale che ci dice che l'elemento dell'immagine sta prendendo davvero l'intera dimensione dello schermo. Ma è solo sbagliato. La "copertina" resizeMode funziona come previsto (e così anche la modalità "stretch"). È la modalità 'contiene' che non funziona (la più importante dal mio punto di vista). Il problema diventa ancora peggiore quando si posiziona l'immagine su una ListView poiché l'immagine non viene nemmeno visualizzata.

UPDATE 1 Come sottolinea Federico, "contiene" funziona solo quando l'immagine è più grande della dimensione del contenitore Quindi, come possiamo rendere l'immagine prendere l'intera dimensione del contenitore mantenendo le sue proporzioni? Le percentuali non sono ancora supportate dagli stili in React e non so come ottenere le proprietà larghezza e altezza dell'immagine una volta che l'immagine è stata caricata. Nessuno degli eventi associati al componente Immagine fornisce tali informazioni.

UPDATE 2 Buone notizie. Ora sto usando React Native v0.24.1 e sembra che la modalità 'contain' dell'immagine ora funzioni come previsto, anche quando la dimensione effettiva dell'immagine è inferiore al suo contenitore. La soluzione di zvona è buona (anche se è necessario tenere a mente che onLayout ti darà la dimensione della vista dell'immagine in cui l'immagine è sottoposta a rendering, ma NON la dimensione effettiva dell'immagine che viene caricata). Per ora, non conosco alcun modo per scoprire la dimensione effettiva dell'immagine (supponiamo che stai recuperando l'immagine da una risorsa di rete e non conosci la dimensione, che potrebbe essere molto importante se vuoi calcolare il suo aspect ratio).

Answer 1

"Contenere" ridimensiona l'immagine solo quando la dimensione dell'immagine è più grande di rispetto al contenitore in cui si sta tentando di installarlo. In questo caso, il contenitore è tutto schermo. L'immagine che stai caricando tramite l'URL è molto più piccola, poiché è solo 53 per 77 pixel. Quindi non verrà ridimensionato.

Penso che "copertura" dovrebbe fare ciò che stai cercando di raggiungere. Tuttavia, a causa delle dimensioni dell'immagine, non sembrerà molto bello quando viene ingrandito in quel modo. Realizzato un esempio qui: https://rnplay.org/apps/X5eMEw

Answer 2

La mia risposta a AGGIORNATO parte della domanda:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} /> 

dove:

onImageLayout: function(data){ 
    console.log('layout', data.nativeEvent.layout); 
} 

Questi dovrebbero essere proporzionati alla larghezza del dispositivo + altezza, che si get with:

const { 
    Dimensions, 
    . 
    . 
    . 
} = React; 

const windowWidth = Dimensions.get('window').width; 
const windowHeight = Dimensions.get('window').height; 

E se si vuole ottenere la larghezza/altezza come percentuali in stili, basta definire ad es .:

const styles = StyleSheet.create({ 
    image: { 
    width: windowWidth * 0.75, 
    height: windowHeight * 0.33 
    }   
}); 

Answer 3

Questo è ciò che ha funzionato per me con l'ultima reagire nativo 0.37:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />