Netzwerk Bilder übertragen und das Seitenverhältnis für die Höhen

Question

React-native pflegen: 0.47.1

Wie würde ich halte das Seitenverhältnis für die Höhe, wenn die Breite beträgt 100%? Grundsätzlich möchte ich die Höhe automatisch skalieren und dabei das Seitenverhältnis beibehalten. Die Bilder werden in einem FlatList angezeigt werden (nicht unbedingt, wenn etwas anderes worls Ich bin glücklich, die FlatList zu ändern). Die Bilder werden von einer Reihe von data angezeigt, die in der state gesetzt:

export default class ImageTest extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     data : [ 
     {id: 1, name: "image1", url: "http://urlOfImage.com/1.jpg"} 
     {id: 2, name: "image2", url: "http://urlOfImage.com/2.jpg"} 
     {id: 3, name: "image3", url: "http://urlOfImage.com/3.jpg"} 
     {id: 4, name: "image4", url: "http://urlOfImage.com/4.jpg"} 
     {id: 5, name: "image5", url: "http://urlOfImage.com/5.jpg"} 
     ]; 
    } 
    } 

    render() { 
    return (
    <View style={styles.container}> 
     <FlatList 
      data={this.state.data} 
      renderItem = {({item})=> 
       <Text style={styles.item}>{item.name}</Text> 
       <Image 
        source={uri: item.url} 
        style={styles.myImageStyle} /> 
      } 
     /> 
    </View> 
    ) 
    } 
} 

const styles = StyleSheet.create(
    myImageStyle: { 
    width: Dimensions.get('window').width, 
    height: /* WHAT DO I PUT HERE ?? */ 
    } 
) 

So sind die Bilder in der Höhe variieren kann, kann ursprüngliche Höhe sein 700px, einige vielleicht 1200px, oder sogar ein quadratisches Bild. Wie würde ich die Höhe für jedes Bild definieren, da sie aus einem Array kommen werden?

Vielen Dank

Answer 1

Sie können eine Dimension des Bildes von URI nehmen. Sie können eine Schleife durch das Array und nehmen die Abmessungen für jedes Bild statisches Verfahren getSize() in Image Komponente enthalten. Hier ist ein documentation for this method

Beispiel:

const preloadedImgData = [] 
this.state.data.forEach((img) => { 
    Image.getSize(img.url, (w, h) => { 
     img.dimensions = {w, h} 
     preloadedImgData.push(img) 
    }) 
}) 

Ich bin nicht sicher, wenn über Code zu 100% korrekt ist, aber Sie auf die Idee gekommen :)

EDIT:

Sie auch Mit diesem Modul können die alles für Sie tun sollten: react-native-fit-image

- Ich bin nicht Besitzer dieses Modul