Я пишу мобильное приложение, используя React Native. У меня есть экран, который содержит FlatList. Каждый элемент списка содержит заголовок, изображение и описание. Вся информация поступает от сервера, поэтому я не имею представления о размере изображения и соотношении сторон.
Мне нужно, чтобы ширина изображения была шириной родительского вида (это не ширина устройства) и высота рассчитывается соответственно. Поэтому я не хочу устанавливать ширину / высоту вообще, поскольку я не знаю, что из этого.
Ниже приведен макет того, что мне нужно произвести.
Еще один вариант этого необходим для другого экрана в моем приложение. Мне нужно, чтобы изображение соответствовало ширине родительского контейнера с некоторым запасом слева и справа. Как и первое требование, изображение приходит с сервера, поэтому я ничего не знаю о нем.
Мои версии
- "@ 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}} />
Ни одна из этих работ, если размер не указан.
Кто-нибудь знает, как получить желаемый интерфейс?