Реагируйте на натив, изображение не масштабируется - resizeMode не имеет никакого полезного эффекта - PullRequest
Новая
       16

Реагируйте на натив, изображение не масштабируется - resizeMode не имеет никакого полезного эффекта

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

У меня есть код, который выглядит следующим образом: 

  <View style={styles.logoContainer}>
    <View style={styles.logoTextContainer}>
      <Text style={styles.logoText}>{siteName}</Text>
    </View>
    <View style={styles.logoImageContainer}>
      <Image source={logo} style={styles.logo} resizeMode="contain" />
    </View>
  </View>

С соответствующими стилями, похожими на это: 

  logoContainer: {
    flex: 4,
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'space-evenly',
      // borderWidth: 1,
      // borderColor: 'blue',
  },
  logoImageContainer: {
    flex: 3,
    justifyContent: 'center',
      // borderWidth: 1,
      // borderColor: 'red',
  },
  logo: {
    width: 250,
    height: 250,
  },

Проблема в том, что ( квадрат ) изображение не масштабируется, чтобы уместиться внутри контейнера (закомментированные границы таковы, что я могу убедиться, что контейнеры находятся там, где я думаю, и нужного размера - они есть).

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

  • Установите resizeMode как опору для элемента Image.

  • Установите resizeMode как стиль.

  • Выполните любое из вышеперечисленных с шириной как «неопределенная» в стиле.

  • Выполните любое из вышеперечисленных с шириной как 'auto' в стиле.

Ничто не изменило, единственное, чтоworks - это установка ширины и высоты конкретно, как видно из кода выше.Это выглядит нормально на более поздних (читай: больше) симках iPhone, но заставляет изображение перекрываться с другими вещами на симуляторе iPhone 5.

Чтобы проверить, оказывает ли свойство resizeMode какой-либо эффект, я установил егок центру (без стилей ширины или высоты).Это было немного более многообещающе, так как изображение теперь только на немного * на 1034 * шире экрана.Тем не менее, он по-прежнему намного выше, чем вид, что противоречит документам в resizeMode: center:

center: центрировать изображение на виде по обоим измерениям.Если изображение больше, чем вид, уменьшите его равномерно, чтобы оно содержалось в виде.

Попытка добавить width = auto / undefined для resizeMode = "center", заставляет изображение недля отображения вообще.

У logoImageContainer есть определенный размер (определенный через flexbox), и я просто хочу, чтобы изображение масштабировалось и центрировалось, чтобы поместиться в нем.

...