L'allineamento dell'immagine quando si usa resizeMode = contiene

Question

Sto usando il tag Image di React Native per visualizzare un'immagine con larghezza e altezza variabili. Ho impostato l'immagine su 100x50 e impostato resizeMode = contiene che funziona quasi perfettamente, tuttavia se l'immagine viene ridimensionata, viene visualizzata completamente centrata verticalmente e orizzontalmente. Questo comportamento può essere modificato? screenshot Mockup:

La scatola rossa indica l'elemento Immagine fissato a 100x50. L'immagine del laptop rappresenta l'immagine di larghezza/altezza variabile. Noterai che il comportamento sta spingendo tutto centrato verticalmente o orizzontalmente.

Nel secondo esempio, mi piacerebbe che l'immagine che occupa il 100% dell'altezza e circa metà della larghezza da spingere sia allineata a sinistra. È possibile?

Grazie!

Answer 1

Tutto - possibilmente risparmiare un po 'di tempo in futuro, questo è un metodo rapido e sporco mi è venuta per risolvere questo:

logoSize(width, height) { 
 
    var maxWidth = 110; 
 
    var maxHeight = 30; 
 

 
    if (width >= height) { 
 
    var ratio = maxWidth/width; 
 
    var h = Math.ceil(ratio * height); 
 

 
    if (h > maxHeight) { 
 
     // Too tall, resize 
 
     var ratio = maxHeight/height; 
 
     var w = Math.ceil(ratio * width); 
 
     var ret = { 
 
     'width': w, 
 
     'height': maxHeight 
 
     }; 
 
    } else { 
 
     var ret = { 
 
     'width': maxWidth, 
 
     'height': h 
 
     }; 
 
    } 
 

 
    } else { 
 
    var ratio = maxHeight/height; 
 
    var w = Math.ceil(ratio * width); 
 

 
    if (w > maxWidth) { 
 
     var ratio = maxWidth/width; 
 
     var h = Math.ceil(ratio * height); 
 
     var ret = { 
 
     'width': maxWidth, 
 
     'height': h 
 
     }; 
 
    } else { 
 
     var ret = { 
 
     'width': w, 
 
     'height': maxHeight 
 
     }; 
 
    } 
 
    } 
 

 
    return ret; 
 
}

Questo richiederà una larghezza e un'altezza di un'immagine, esegui alcuni calcoli di proporzioni e sputa un insieme di dimensioni sulla base di maxWidth e maxHeight vars nella parte superiore. Puoi quindi prendere le dimensioni che il metodo sopra ti dà e applicarlo a un elemento Immagine, ad es. :

var dims = logoSize(244,127); 
 
<Image style={[styles.logo, {width:dims.width, height:dims.height}]} source={{uri:'/path/to/image.png}} />

Poiché il giro calcoli, potrebbe essere necessario applicare la resizeMode: 'contiene' al styles.logo nel foglio di stile.

Spero che questo salvi qualcuno un po 'di tempo.

Answer 2

È possibile, ma non aspettatevi che i nativi reattivi si occupino di tutto. Potresti voler scrivere un piccolo algoritmo per farlo accadere. Quello che fa resizeMode="contain" è che controlla se la dimensione dell'immagine è maggiore o minore del contenitore. Se è maggiore del contenitore, verrà ridimensionato per adattarsi al contenitore. Se è più piccolo del contenitore, sarà reso così com'è.

Per quanto riguarda l'allineamento dell'immagine, a reagire-nativo non interessa molto. Le immagini sono posizionate al centro del contenitore. Se si desidera posizionare l'immagine allineata a sinistra, sarà necessario scrivere un piccolo algoritmo che confronta le dimensioni effettive dell'immagine e le dimensioni del contenitore.

Ad es. Se l'altezza dell'immagine è maggiore del contenitore, imposta l'altezza dell'immagine uguale all'altezza del contenitore e calcola la larghezza del contenitore usando "aspect ratio". Read this per avere un'idea chiara di cosa dovrai fare.

Inoltre, giocare con position: 'absolute' per soddisfare meglio le proprie esigenze. In bocca al lupo!

Modifica: Ci scusiamo per non aver trovato una soluzione pronta per voi. Tuttavia, potresti trovare l'algoritmo desiderato su google. Ti ho solo spinto nella giusta direzione.

Answer 3

Ho risolto un compito simile nel seguente modo.In primo luogo è necessario impostare gli stili immagine iniziale:

initialImageStyle : { flex:1, resizeMode:'cover' }

Questo renderà l'immagine nella sua dimensione originale che vogliamo catturare in una specifica onLayout callback. Quindi il trucco è quello di attuare tale richiamata in modo che segue:

onLayout (e) { 
 
\t \t 
 
\t if (this.state.imageSize) { return } 
 
\t 
 
\t const { x, y, 
 
\t \t height, 
 
\t \t width } \t \t = e.nativeEvent.layout, 
 
\t \t sizeX \t \t = width - x, 
 
\t \t sizeY \t \t = height - y, 
 
\t \t imageWidth \t = (sizeX/sizeY) * IMAGE_HEIGHT 
 

 
\t this.setState ({ imageSize: { height: IMAGE_HEIGHT, width: imageWidth, resizeMode: 'contain', }}) 
 
}

dove IMAGE_HEIGHT è un'altezza costante del vostro contenitore di immagini. Ora tutto ciò che dovete fare è basta sostituire gli stili immagine iniziale con lo stato:

<Image 
 
    style={ this.state.imageSize || styles.initialImageStyle } 
 
    source={ /* your image */ } 
 
    onLayout={ this.onLayout.bind (this) } 
 
/>

Questo è tutto. Nel tuo caso potresti dover anche avvolgere un'immagine in una vista aggiuntiva. Spero che questo ti sia d'aiuto.

Buona fortuna!