Я пытаюсь поместить изображения в их содержащие представления, чтобы у меня была бесшовная сетка изображений. Проблема в том, что resizeMode='contain'
, по-видимому, соответствует ширине экрана или, по крайней мере, некоторого контейнера более высокого уровня, мне нужно, чтобы изображения соответствовали размеру каждого элемента списка.
Вот очень уродливый пример стилей и результирующей сетки:
Стили:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
item: {
flex: 1,
overflow: 'hidden',
alignItems: 'center',
backgroundColor: 'orange',
position: 'relative',
margin: 10
},
image: {
flex: 1
}
})
Макет:
<TouchableOpacity
activeOpacity={ 0.75 }
style={ styles.item }
>
<Image
style={ styles.image }
resizeMode='contain'
source={ temp }
/>
</TouchableOpacity>
Результат (с resizeMode='contain'
):
Результат (с resizeMode='cover'
):
Как вы можете видеть, изображения cover
ed очень большие и имеют такой же широкий, как и весь экран, и не соответствуют непосредственно отображаемому виду.
Обновление 1:
Мне удалось достичь результата, близкого к тому, что я искал, применяя масштабное преобразование к изображению и уменьшая его от центра:
Преобразование:
transform: [{ scale: 0.55 }]