Jak ustawić szerokość obrazu na 100%, a wysokość na auto reaguje natywnie?

Question

Próbuję wyświetlić listę obrazów w przewijanym widoku. Szerokość powinna wynosić 100%, a wysokość powinna być automatyczna, zachowując proporcje.

Poszukiwania, które zrobiłem, wskazywały na różne rozwiązania, które dają pełny styl tła.

const styles = StyleSheet.create({ 
    image: { 
     width: null, 
     height: 300, 
     resizeMode: 'cover' 
    } 
}); 

<ScrollView style={{flex: 1}}> 
    <Image style={styles.image} source={require('../../../images/collection-imag1.png')}/> 
    <Image style={styles.image} source={require('../../../images/collection-imag2.png')}/> 
</ScrollView> 

Próbowałem różnych kombinacji szerokości: null, wysokość: null, Flex: 1, alignSelf itd. Powyższe rozwiązanie jest prawie pracy, z wyjątkiem wysokość nie jest dynamiczny. Części obrazu nie są widoczne.

Answer 1

"resizeMode" nie jest właściwością stylu. Powinieneś przenieść się do komponentu Image Props jak poniżej.

const win = Dimensions.get('window'); 

const styles = StyleSheet.create({ 
    image: { 
     flex: 1, 
     alignSelf: 'stretch', 
     width: win.width, 
     height: win.height, 
    } 
}); 

... 
    <Image 
     style={styles.image} 
     resizeMode={'contain'} /* <= changed */ 
     source={require('../../../images/collection-imag2.png')} /> 
... 

Answer 2

Zawsze należy ustawić szerokość i wysokość Image. Nie będzie automatycznie sortować rzeczy dla ciebie. React Native docs says so.

Należy zmierzyć całkowitą wysokość ScrollView przy użyciu onLayout i ustawić na tej podstawie wysokość Image s. Jeśli użyjesz resizeMode z cover, zachowa on proporcje twoich Image s, ale oczywiście będzie je przycinał, jeśli jest większy niż kontener.

Answer 3

Po pewnym myśleniu udało mi się osiągnąć wzrost: auto w reakcji na natywny obraz. Musisz znać wymiary swojego obrazu, aby ten hack zadziałał. Wystarczy otworzyć obraz w dowolnej przeglądarce obrazów, aby uzyskać wymiary obrazu w plikach. Dla porównania wielkości obrazu użyłem to 541 x 362

najpierw zaimportować Wymiary od reagują-rodzimy

import { Dimensions } from 'react-native'; 

następnie trzeba uzyskać wymiary okna

const win = Dimensions.get('window'); 

teraz obliczyć Współczynnik jako

const ratio = win.width/541; //541 is actual image width 

teraz dodaj styl do swojego zdjęcia e jak

imageStyle: { 
    width: win.width, 
    height: 362 * ratio, //362 is actual height of image 
}