Блог

Главная - Вопросы по программированию - React Native image: почему родительский вид остается на той же высоте, что и «обложка», когда установлено значение «содержать»?

React Native image: почему родительский вид остается на той же высоте, что и «обложка», когда установлено значение «содержать»?

#reactjs #react-native #flexbox #react-native-image #react-native-flexbox

#reactjs #react-native #flexbox #react-native-image #react-native-flexbox

Вопрос:

У меня есть следующее изображение в моем приложении React Native

введите описание изображения здесь

Я хочу, чтобы это изображение находилось внутри родительского элемента без пробелов над или под ним, и я хочу, чтобы изображение не перекрывало левую или правую стороны экрана

Когда у меня есть такой код

 <View style={{
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
}}>
    <Image
        style={{
            width: '100%'
        }}
        source={require('@images/swoosh-02.png')}
    />
</View>

Я понимаю это, потому resizeMode что по умолчанию для cover

введите описание изображения здесь

Когда я меняю его на это (добавление resizeMode='contain' )

 <View style={{
    marginTop: 100,
    borderWidth: 2,
    borderColor: 'red'
}}>
    <Image
        style={{
            width: '100%'
        }}
        resizeMode='contain'
        source={require('@images/swoosh-02.png')}
    />
</View>

изображение успешно содержится по горизонтали, но высота родительского элемента остается такой же, какой она была, когда resizeMode была cover .

введите описание изображения здесь

Как я могу сделать так, чтобы родительский элемент сжимался по вертикали, чтобы содержать только изображение и не иметь дополнительного верхнего / нижнего заполнения?

Ответ №1:

Разница между содержимым и обложкой :

ResizeMode = «содержать» = равномерно масштабировать изображение (поддерживать соотношение сторон изображения), чтобы оба размера (ширина и высота) изображения были равны или меньше соответствующего размера вида (минус отступы).

ResizeMode = «обложка» = равномерно масштабировать изображение (поддерживать соотношение сторон изображения), чтобы оба размера (ширина и высота) изображения были равны или больше соответствующего размера вида (минус отступы).

Возможно, вам следует попробовать применить высоту в вашем представлении.

Прочитайте эту статью, она должна вам помочь.

Метки: , ,