Response-native - Fit Image in with View, а не весь размер экрана

Я пытаюсь поместить изображения в их содержащие представления, чтобы у меня была бесшовная сетка изображений. Проблема в том, что 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 }]

Полученный макет (без полей или прокладок):

Ответы

Ответ 1

Я не смог заставить пример работать, используя свойства resizeMode Image, но, поскольку все изображения будут квадратными, есть способ сделать это, используя Размеры окна вместе с flexbox.

Установите flexDirection: 'row' и flexWrap: 'wrap', тогда все они будут выстроены в линию, если они имеют одинаковые размеры.

Я настроил это здесь

https://snack.expo.io/HkbZNqjeZ

"use strict";

var React = require("react-native");
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  Dimensions,
  ScrollView
} = React;

var deviceWidth = Dimensions.get("window").width;
var temp = "http://thumbs.dreamstime.com/z/close-up-angry-chihuahua-growling-2-years-old-15126199.jpg";
var SampleApp = React.createClass({
  render: function() {
    var images = [];

    for (var i = 0; i < 10; i++) {
      images.push(
        <TouchableOpacity key={i} activeOpacity={0.75} style={styles.item}>
          <Image style={styles.image} source={{ uri: temp }} />
        </TouchableOpacity>
      );
    }

    return (
      <ScrollView style={{ flex: 1 }}>
        <View style={styles.container}>
          {images}
        </View>
      </ScrollView>
    );
  }
});

Ответ 2

Установите размеры для вида и убедитесь, что для вашего изображения заданы высота и ширина "undefined", как в примере ниже:

    <View style={{width: 10, height:10 }} >
      <Image style= {{flex:1 , width: undefined, height: undefined}}    
       source={require('../yourfolder/yourimage')}
        />
    </View>

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

Ответ 3

Если вы знаете, например, соотношение сторон, если ваше изображение квадратное, вы можете установить либо height, либо width, чтобы заполнить контейнер, и получить другое, которое будет установлено свойством aspectRatio

Вот стиль, если вы хотите, чтобы height устанавливался автоматически:

{
    width: '100%',
    height: undefined,
    aspectRatio: 1,
}

Примечание: height должно быть undefined

Ответ 4

Я думаю, потому что вы не указали ширину и высоту для item.

Если вы хотите иметь только 2 изображения подряд, вы можете попробовать что-то подобное вместо использования flex:

item: {
    width: '50%',
    height: '100%',
    overflow: 'hidden',
    alignItems: 'center',
    backgroundColor: 'orange',
    position: 'relative',
    margin: 10,
},

Это работает для меня, надеюсь, это поможет.