Ответ 1

Мне удалось смоделировать CSS backgroundPosition с помощью следующего кода:

<View style={{ overflow: 'hidden' }}>
  <Image src={{ uri: imageURI }} style={{ height: /*adjust_as_needed*/, resizeMode: 'cover' }} />
</View>

Из-за переполнения: "скрытый" в представлении можно регулировать высоту изображения, не видя дополнительной высоты изображения. Для режима изменения размера вам также потребуется использовать "cover", а не "closed", иначе вы получите центрированное изображение, которое не будет таким же широким, как контейнер View, если вы установите слишком большую высоту изображения,

В верхнем примере ниже высота изображения (синяя пунктирная линия) больше, чем нижний пример, и поэтому центральная линия изображения расположена ниже на виде. Уменьшая высоту изображения (синяя пунктирная линия) во втором примере, центральная линия изображения перемещается вверх на виде.

Надеюсь, что это имеет смысл, и я надеюсь, что это работает для вашего случая использования; это сделал для меня: D

Ответ 2

Вам нужно использовать стили на вашем изображении, чтобы установить желаемое вертикальное выравнивание.

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Image source={{uri: "http://placekitten.com/300/505"}} style={styles.image}>
          <Text style={styles.instructions}>
            Hello !
            </Text>
        </Image>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  image: {
    height: 500,
    justifyContent: "space-around",    //  <-- you can use "center", "flex-start",
    resizeMode: "contain",             //      "flex-end" or "space-between" here
  },
  instructions: {
    textAlign: 'center',
    color: 'white',
    backgroundColor: "transparent",
    fontSize: 25,
  },
});

См. Https://rnplay.org/apps/9D5H1Q для работающего примера.

Ответ 3

Мне нужно было сделать то же самое. Лучший способ, который я нашел для этого, - явно указать высоту или ширину изображения. Затем, обернув изображение другим компонентом, вы можете использовать justifyContent, чтобы иметь полный контроль над положением изображения.

Верно, что вы не всегда можете иметь ширину или высоту изображения. Однако довольно часто (особенно используется resizeMode: "содержать" ), вы хотите установить высоту или ширину относительно чего-то. Я хотел, чтобы высота была равна ширине окна просмотра. Вот решение, которое я использовал:

<View style={{ flex: 1, justifyContent: 'flex-start' }}>
    <Image
      source={{ uri: imagePath }}
      resizeMode="contain"
      style={{ height: vw(100) }}
    />
 </View>

vw - вспомогательная функция, полученная из этого ответа.

Ответ 4

Использование resizeMethod="resize"

Я нашел решение, которое не требует каких-либо дополнительных тегов или уловок. Всего одна опора.

уздечка

У меня была та же проблема, потому что мое изображение на пульте в 3 раза больше обычного. И после загрузки в телефон со значениями стиля { height: 100, width: 300, resizeMode: 'contain' } он автоматически центрируется.

пример

Чтобы исправить это, я просто добавил опору resizeMethod как resizeMethod ниже:

<Image
  style={{ height: 100, width: 300, resizeMode: 'contain' }}
  source={{ uri: 'https://www.fillmurray.com/900/300' }}
  resizeMode="contain"
  resizeMethod="resize"
/>

Надеюсь, поможет!

Ответ 5

Вам нужно исправить некоторые значения, а другой - без набора. в большинстве случаев пусть ширина фиксирована. Будьте осторожны с опцией parent flex. Это может изменить ваш дизайн.