react-native - Adatta immagine nel contenere Visualizza, non l'intera dimensione dello schermo

Question

Sto provando ad adattare le immagini nelle loro viste contenenti in modo che possa avere una griglia di immagini senza interruzioni. Il problema è che resizeMode='contain' sembra adattarsi alla larghezza dello schermo o almeno ad un contenitore di livello superiore, ho bisogno che le immagini si adattino alla dimensione di ogni elemento della lista.

Ecco un bruttissimo esempio degli stili e la griglia risultante:

Gli stili:

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'blue' 
    }, 

    item: { 
    flex: 1, 
    overflow: 'hidden', 
    alignItems: 'center', 
    backgroundColor: 'orange', 
    position: 'relative', 
    margin: 10 
    }, 

    image: { 
    flex: 1 
    } 
}) 

Il layout:

<TouchableOpacity 
    activeOpacity={ 0.75 } 
    style={ styles.item } 
> 
    <Image 
    style={ styles.image } 
    resizeMode='contain' 
    source={ temp } 
    /> 
</TouchableOpacity> 

Il risultato (con resizeMode='contain'):

Il risultato (con resizeMode='cover'):

Come si può vedere, le immagini cover ED sono molto grandi e sono larga quanto l'intero schermo e non si adattano la vista immediatamente che contiene.

Update 1:

sono stato in grado di ottenere un risultato vicino a quello che sto cercando applicando una scala a trasformare l'immagine e si riduce dal centro:

la trasformazione:

transform: [{ scale: 0.55 }] 

Il layout risultante (senza margini o imbottiture):

Answer 1

Non ho potuto ottenere l'esempio lavorando con le proprietà resizeMode di Image, ma poiché le immagini saranno tutte quadrate, c'è un modo per farlo usando le Dimensioni della finestra insieme a Flexbox.

Impostare flexDirection: 'row' e flexWrap: 'wrap', quindi verranno allineati finché sono tutte le stesse dimensioni.

impostare il tutto here

https://snack.expo.io/HkbZNqjeZ

"use strict"; 

var React = require("react-native"); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Image, 
    TouchableOpacity, 
    Dimensions, 
    ScrollView 
} = React; 

var deviceWidth = Dimensions.get("window").width; 
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg"; 
var SampleApp = React.createClass({ 
    render: function() { 
    var images = []; 

    for (var i = 0; i < 10; i++) { 
     images.push(
     <TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}> 
      <Image style={styles.image} source={{ uri: temp }} /> 
     </TouchableOpacity> 
    ); 
    } 

    return (
     <ScrollView style={{ flex: 1 }}> 
     <View style={styles.container}> 
      {images} 
     </View> 
     </ScrollView> 
    ); 
    } 
}); 

Answer 2

Penso che sia perché non è stato specificato la larghezza e l'altezza per il item.

Se si desidera solo avere 2 immagini di fila, si può provare qualcosa di simile, invece di utilizzare Flex:

item: { 
width: '50%', 
height: '100%', 
overflow: 'hidden', 
alignItems: 'center', 
backgroundColor: 'orange', 
position: 'relative', 
margin: 10, 
}, 

questo funziona per me, spero che aiuta.

Answer 3

Impostare le dimensioni al Visualizza e assicurarsi che il Immagine è in stile con altezza e larghezza impostata 'undefined' come nell'esempio qui sotto:

<View style={{width: 10, height:10 }} > 
     <Image style= {{flex:1 , width: undefined, height: undefined}}  
     source={require('../yourfolder/yourimage'} 
     /> 
    </View> 

Questo farà in modo che la vostra immagine scala e si adatta perfettamente alla tua vista.