it-roy-ru.com

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

Я пытаюсь отобразить список изображений в виде прокрутки. Ширина должна быть 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 и т.д. Приведенное выше решение почти работает, за исключением того, что высота не является динамической. Части изображения не видны.

29
Prabhakar Bhat

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

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

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

Есть много полезных библиотек с открытым исходным кодом, список которых приведен ниже.

24
Lwin Kyaw Myat

Поэтому, подумав некоторое время, я смог достичь высоты: auto в реагирующем родном изображении .. Вам нужно знать размеры вашего изображения, чтобы этот хак сработал. Просто откройте свое изображение в любой программе просмотра изображений, и вы получите размеры вашего изображения в информации о файле .... Для справки: размер изображения, который я использовал, составляет 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
}
14
Vinit Kadam

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

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

5
rclai

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

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