Реактивное изображение соответствует ширине родителя и автоматически определяется по высоте - PullRequest
0 голосов
/ 29 апреля 2020

Я пишу мобильное приложение, используя React Native. У меня есть экран, который содержит FlatList. Каждый элемент списка содержит заголовок, изображение и описание. Вся информация поступает от сервера, поэтому я не имею представления о размере изображения и соотношении сторон.

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

Ниже приведен макет того, что мне нужно произвести.

enter image description here

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

enter image description here

Мои версии

  • "@ response-native-community / masked-view": "^ 0.1.7",
  • "@ response-navigation / native": "^ 5.1.4",
  • "@ реагировать-навигация / стек": "^ 5.2.9",
  • "реагировать": "16.11.0",
  • "реагировать-нативно": "0.62 .0 ",

Что я пробовал

https://www.npmjs.com/package/react-native-scalable-image

<Image source={{uri : imageUrl}} />

https://github.com/huiseoul/react-native-fit-image

<FitImage source={{uri : imageUrl}}

https://github.com/wassgha/react-native-fullwidth-image

<FullWidthImage source={{uri : imageUrl}} />

Ни одна из этих работ, если размер не указан.

Кто-нибудь знает, как получить желаемый интерфейс?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...