Сделать заполнение изображения родительским, но сохранить соотношение в реагирующем (динамические / сетевые изображения) - PullRequest
Новая
       18

Сделать заполнение изображения родительским, но сохранить соотношение в реагирующем (динамические / сетевые изображения)

0 голосов
/ 21 октября 2018

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

В Интернете я могу добиться этого с помощью: 

.image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Вот как это должно выглядеть (упрощенно):
https://codepen.io/laurentsmohr/pen/OBEGRG?fbclid=IwAR1-dFcTC7vvXwd0m2NTeCMxm6A6Uzv0lFx2UUCNpgFnpSgEm9aHhr14LK4

Ответы [ 3 ]

0 голосов
/ 22 октября 2018

Согласно этому официальному руководству React-Native , если вы хотите динамически масштабировать изображение в соответствии с размерами его родительского элемента, вы должны установить ширину и высоту изображения как неопределенные, и, возможно,также добавьте resizeMode = "Содержать" для изображения реквизита.Вы можете использовать этот стиль для вашего изображения: 

import { StyleSheet, Dimensions } from 'react-native;

// Get device width
const deviceWidth = Dimensions.get('window').width;

/*
image container dimension is dynamic depending on the device width
image will dimension will follow imageContainer's dimension
*/
const styles = StyleSheet.create({
  imageContainer: {
    height: deviceWidth * 0.8,
    width: deviceWidth * 0.8
  },
  image: {
    flex: 1,
    height: undefined,
    width: undefined
  }
});

export default styles;
0 голосов
/ 28 октября 2018

Хотя вышеприведенные решения работают для локальных образов, они не работают для сетевых образов.И вот почему: https://facebook.github.io/react-native/docs/images#why-not-automatically-size-everything

Самым простым решением для меня было рассчитать высоту моего компонента на основе высоты размеров и гибкой части, которую мой компонент принимает на виде.
Например, на мой взглядКомпонент изображения имеет .85 flex, в родительском, который имеет 1 flex.Таким образом, 100% высоты родительского элемента равны: 

Dimensions.get('window').height * 0.85
0 голосов
/ 21 октября 2018

Я всегда использую StyleSheet.absoluteFillObject.Это заполнит размер родителя.resizeMode может быть contain, cover, stretch, center, repeat.Как это: 

  image: {
    resizeMode: 'cover',
    ...StyleSheet.absoluteFillObject,
  },
...