Comment conserver le format de l'image avec une largeur donnée dans React-Native?

Question

Je me suis éveillé sur une galerie d'images. J'ai besoin de montrer 3 images par rangée dans un ListView.

renderCategory(category) { 
    return (
     <Image source={{uri: category.image}} style={styles.image}> 
      <Text style={styles.headline}>{category.name}</Text> 
     </Image> 
    ); 
    } 
    render() { 
    return (
     <View> 
     <Button title="Back" color="#5c6bc0" onPress={this.onPress}/> 
     <ListView dataSource={this.state.dataSource} renderRow={this.renderCategory} contentContainerStyle={styles.list_view}/> 
     </View> 
    ); 
    } 

Ce que je l'ai fait avec une largeur est

image: { 
     height: 110, 
     width: Dimensions.get('window').width/3 
} 

Ici, je suis dur Cording la hauteur de l'image. Est-il possible d'ajuster la hauteur de l'image avec la largeur donnée dans reac-native.

Answer 1

exemple de code:

image: { 
    width: Dimensions.get('window').width/3 - 10 , 
    height: Dimensions.get('window').width/3 - 10, 
    margin:5, 
    resizeMode: 'contain', 

} 

Answer 2

Par exemple, si votre largeur/hauteur de l'image d'origine est de 500 px x 1000 px. Et vous voudriez garder l'aspect radio avec une largeur statique.

const radio = 1000/500; 
const static_width = Dimensions.get('window').width/3; 

image: { 
    height: static_width * radio, 
    width: static_width; 
} 

Espérons cette aide.