Я использую 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 даст вам размер изображения, в котором отображается изображение, но НЕ фактический размер загружаемого изображения). На данный момент я не знаю какого-либо способа узнать фактический размер изображения (предположим, вы извлекаете изображение из сетевого ресурса и не знаете его размера, что может быть очень важно, если вы хотите рассчитать его соотношение сторон).