Как возвести в квадрат ImageBackground в зависимости от размеров дисплея? - PullRequest
Новая
       26

Как возвести в квадрат ImageBackground в зависимости от размеров дисплея?

0 голосов
/ 04 июня 2019

Я хочу выровнять фоновое изображение, например,

Высота: 200, Ширина: 200,

Но затем я также хочу изменить размер в зависимости от размера дисплея, например:

ширина: Dimensions.get ('окно'). Ширина / 2,5 высота: 'авто'

Как я могу это сделать?

установить высоту на "авто" неРабота.Также я играл с resizeMode

Это стиль реквизита: 

  backgroundImageStyle: {
    alignSelf: 'center',
    top: 100,
    resizeMode: 'stretch',
    alignItems: 'center',
    width: 200,
    height: 200,
    position: 'absolute'
  },

1 Ответ

1 голос
/ 04 июня 2019

Вы можете использовать backgroundImageStyle в качестве опции стиля по умолчанию, но я бы порекомендовал использовать resizeMode "Содержит".В вашем методе рендеринга вы можете переопределить вашу высоту / ширину с помощью: 

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width, height: Dimensions.get('window').width}]}
/>

Рабочий пример:

https://snack.expo.io/S15hYZVAN

Вывод:

example

Редактировать:

Если вы не хотите иметь полный размерВы можете уменьшить изображение, разделив ширину на коэффициент, как показано ниже: 

<Image source={{YOUR_IMAGE_URI}} 
style={[styles.backgroundImageStyle, {width: Dimensions.get('window').width/2.5, height: Dimensions.get('window').width/2.5}]}
/>
...