Как установить ширину изображения на 100% и высоту для автоматического реагирования на родной?

Я пытаюсь отобразить список изображений в scrollview. Ширина должна быть 100%, а высота должна быть автоматической, сохраняя соотношение сторон.

Поиск, который я указал, указывал на различные решения, которые дают полноэкранный стиль фона.

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>

Я пробовал различные комбинации ширины: null, height: null, flex: 1, alignSelf и т.д. Вышеупомянутое решение почти работает, за исключением того, что высота не является динамической. Части изображения не видны.

Ответы

Ответ 1

"resizeMode" не является свойством стиля. Следует перейти к компоненту Image Props как Props ниже.

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')} /> 
...

Высота изображения не становится автоматически, потому что компонент изображения требует ширину и высоту в style props. Таким образом, вы можете рассчитать, используя метод getSize() для удаленных изображений, таких как этот ответ, и вы также можете рассчитать соотношение изображений для статических изображений, как этот ответ.

Есть много полезных библиотек с открытым исходным кодом -

Ответ 2

Поэтому, подумав некоторое время, я смог достичь высоты: авто в реакции-родной образ. Вам нужно знать размеры вашего изображения, чтобы этот хак работал. Просто откройте свое изображение в любой программе просмотра изображений, и вы получите размеры вашего изображения в информации о файле. Для справки размер изображения, которое я использовал, составляет 541 x 362.

Первый импорт Размеры из Реактива

import { Dimensions } from 'react-native';

тогда вы должны получить размеры окна

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

Теперь рассчитайте соотношение как

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

Теперь добавьте стиль для вашего изображения как

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

Ответ 3

Вам всегда нужно установить ширину и высоту Image. Это не будет автоматически определять размеры для вас. React Native docs говорит так.

Вы должны измерить общую высоту ScrollView с помощью onLayout и установить высоту Image на основе этого. Если вы используете resizeMode of cover, он сохранит пропорции вашего Image, но он, очевидно, обрезает их, если он больше, чем контейнер.

Ответ 4

Для тега изображения вы можете использовать этот тип стиля, он работал для меня:

imageStyle: {
    width: Dimensions.get('window').width - 23,
    resizeMode: "contain",
    height: 211,
 },

Ответ 5

У меня были проблемы со всеми вышеуказанными решениями. Наконец, я использовал aspectRatio, чтобы добиться цели. Когда вы знаете ширину и высоту изображения, а они большие, просто вычислите aspectRatio и добавьте его в изображение следующим образом:

<PhotoImage
    source={{uri: 'data:image/jpeg;base64,${image.base64}'}}
    style={{ aspectRatio: image.width / image.height }}
 />

AspectRatio является свойством макета React Native, чтобы сохранить пропорции изображения и вписаться в родительский контейнер: https://facebook.github.io/react-native/docs/layout-props#aspectratio