rendu des images de réseau et de maintenir le rapport d'aspect de la hauteur

Question

React natif: 0.47.1

Comment pourrais-je maintenir le ratio d'aspect de la hauteur lorsque la largeur est de 100%? Fondamentalement, je veux mettre à l'échelle automatiquement la hauteur tout en conservant le rapport d'aspect. Les images seront affichées dans un FlatList (pas nécessairement, si quelque chose d'autre fonctionne, je suis heureux de changer le FlatList). Les images sont affichées à partir d'un tableau de data qui est situé dans le state:

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 ?? */ 
    } 
) 

Ainsi, les images peuvent varier en hauteur, la hauteur d'origine peut être 700px, certains peut-être 1200px, ou même une image carrée. Comment définir la hauteur de chaque image puisqu'elle provient d'un tableau?

Un grand merci

Answer 1

Vous pouvez prendre les dimensions de l'image de l'URI. Vous pouvez parcourir votre tableau et prendre les dimensions de chaque image en utilisant la méthode statique getSize() incluse dans le composant Image. Voici un documentation for this method

Exemple:

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

Je ne sais pas si le code ci-dessus est 100% correct, mais vous avez l'idée :)

EDIT:

Aussi, vous pouvez utiliser ce module qui devrait tout faire pour vous: react-native-fit-image

- Je ne suis pas le propriétaire de ce module