React Native: выровнять изображение снизу по высоте источника выше контейнера - PullRequest
Новая
       38

React Native: выровнять изображение снизу по высоте источника выше контейнера

0 голосов
/ 15 апреля 2019

Я бы хотел выровнять изображение снизу, используя Image или ImageBackground, но мне это не удалось. 

<View style={styles.moduleHeader}>
  <ImageBackground
     style={styles.image}
     source={{ uri: image }}
     resizeMode="cover">
     <Text>text</Text>
  </ImageBackground>
</View> 

moduleHeader: {
  height: 200,
},

image: {
  width: Layout.viewport.width, //device width
  height: 200,
  position: "absolute",
  bottom: 0,
},

Другие попытки включают отрицательное верхнее поле и отступы.

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

Включение абсолютного и нижнего не имеет эффекта, который я могу сказать ... В основном я хотел бы имитировать эффект background-position: center bottom; в CSS.
Я не против, если изображение обрезается по горизонтали, только то, что нижняя часть изображения совмещена с нижней частью контейнера.

Я не смог с уверенностью обнаружить, что это возможно даже в React-Native, поэтому подтверждение этой теории будет правильным ответом.

Как всегда, высоко ценится любое направление, поэтому спасибо заранее!

1 Ответ

0 голосов
/ 15 апреля 2019

Вам необходимо удалить позицию и нижний тег из стиля ImageBackground и добавить в стиль View

Примерно так 

moduleHeader: {
  height: 200,
  width:'100%',
  position: "absolute",
  bottom: 0,
},

image: {
  width:'100%', //device width
  height: 200,
  backgroundColor:"#000",
},

Пожалуйста, проверьте код этой закуски

https://snack.expo.io/@vishal7008/again-bottom-ui

...