Изображение "содержит" resizeMode не работает в реакции native

Я использую React Native на реальном устройстве Android. При создании действительно простого приложения со следующей функцией рендеринга в главном компоненте приложения...

render() {
  <Image
    source={{uri:'http://resizing.flixster.com/DeLpPTAwX3O2LszOpeaMHjbzuAw=/53x77/dkpu1ddg7pbsk.cloudfront.net/movie/11/16/47/11164719_ori.jpg'}}
    style={
      {
        flex: 1,
        resizeMode: 'contain',
        backgroundColor: 'yellow'
      }          
    } />
}

Я получаю следующий результат на моем устройстве:

Как вы можете видеть, весь фон желтый, что говорит нам о том, что элемент изображения действительно занимает весь экран. Но это просто неправильно. ResizeMode "cover" работает как положено (как и режим "stretch"). Это режим "Содержать", который не работает (самый важный с моей точки зрения). Проблема усугубляется при размещении изображения в ListView, так как изображение даже не отображается.

ОБНОВЛЕНИЕ 1 Как указывает Фредерик, "содержать" работает только тогда, когда изображение больше, чем размер контейнера. Итак, как мы можем заставить изображение принимать весь размер контейнера, сохраняя его пропорции? Проценты еще не поддерживаются стилями в React, и я не знаю, как получить свойства ширины и высоты изображения после загрузки изображения. Ни одно из событий, связанных с компонентом Image, не предоставляет такую информацию.

ОБНОВЛЕНИЕ 2 Хорошие новости. Сейчас я использую React Native v0.24.1, и кажется, что режим "Содержать" изображения теперь работает, как и ожидалось, даже когда фактический размер изображения меньше, чем его контейнер. Решение zvona хорошо (хотя вы должны иметь в виду, что onLayout даст вам размер изображения, в котором отображается изображение, но НЕ фактический размер загружаемого изображения). На данный момент я не знаю какого-либо способа узнать фактический размер изображения (предположим, вы извлекаете изображение из сетевого ресурса и не знаете его размера, что может быть очень важно, если вы хотите рассчитать его соотношение сторон).

Ответ 1

Мой ответ на ОБНОВЛЕННУЮ часть вопроса:

<Image source={{uri:'...'}} onLayout={this.onImageLayout} />

где:

onImageLayout: function(data){
  console.log('layout', data.nativeEvent.layout);
}

Они должны быть пропорциональны ширине устройства + высоте, которые вы получаете:

const {
  Dimensions,
  .
  .
  .
} = React;

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

И если вы хотите получить ширину/высоту в процентах в стилях, вы просто определяете, например:

const styles = StyleSheet.create({
  image: {
    width: windowWidth * 0.75,
    height: windowHeight * 0.33
  }          
});

Ответ 2

Вот что сработало для меня с последней реакцией-нативной 0.37:

<Image source={require('../images/my-image.png')} resizeMode={Image.resizeMode.center} />

Отвечая на обновленную часть вопроса. Вы можете получить размер изображения для внешних изображений, используя Image.getSize.

Для локальных изображений не очень документированный способ выяснить размер и, таким образом, рассчитать соотношение сторон, использует resolveAssetSource который является собственным модулем реакции (нет необходимости во внешней библиотеке):

let resolveAssetSource = require('resolveAssetSource')
let { width, height } = resolveAssetSource(image_source)
let aspectRatio = width / height

Ответ 3

Это новейшее решение:

Image.resizeMode.contain не работает с последней версией собственного кода, поэтому я использую его так:

import ImageResizeMode from 'react-native/Libraries/Image/ImageResizeMode'

<Image source={image} resizeMode={ImageResizeMode.contain} />

Ответ 4

"Contain" изменяет размер вашего изображения только в том случае, если размер изображения больше, чем контейнер, в который вы пытаетесь вставить его. В этом случае ваш контейнер является полноэкранным. Изображение, загружаемое по URL-адресу, меньше, поскольку оно составляет всего 53 на 77 пикселей. Поэтому он не будет изменяться.

Я думаю, что "обложка" должна делать то, что вы пытаетесь достичь. Однако, из-за размера изображения, он не будет выглядеть очень красиво, когда он будет увеличен таким образом. Здесь приведен пример: https://rnplay.org/apps/X5eMEw