React Родной гибкий размер представления в выгруженном scrollview

Question

Я пытаюсь использовать ScrollView (с поддержкой пейджинга) в React Native для просмотра через ряд изображений. Кто-нибудь знает, как заставить изображения просматривать каждую страницу прокрутки? До сих пор у меня были только большие значения ширины и высоты кодирования для стиля изображения.

Вот примерно то, что я делаю:

render: function() { 
    return (
    var images = [{ url: 'http://url/to/image.jpg' }, { url: 'http://url/to/another-image.jpg'}]; 
    <ScrollView horizontal={true} pagingEnabled={true} style={styles.myScrollViewStyle}> 
     {images.map(image => { 
     return (
      <Image source={{uri: image.url}} style={styles.myImageStyle} /> 
     ); 
     })} 
    </ScrollView> 
); 
} 

Единственный способ изображения показать, если я жёстко номер ширина/высота в стиле. Я не смог заставить изображение просто сгибать, чтобы заполнить 1 целую страницу.

стиль ScrollView:

scrollView: { 
    flex: 1, 
    backgroundColor: '#000000', 
} 

стиль изображения:

image: { 
    width:375, 
    height:667, 
    flex: 1, 
    backgroundColor: 'rgba(0,0,0,0)', 
} 

Answer 1

Я не считаю, что можно достичь этого, используя только Flex прямо сейчас, так как он будет пытаться содержать все изображения в вашем контейнере.

ScrollView имеет свойство contentContainerStyle={}, поэтому я мог представить себе решение, подобное тому, как устанавливать ширину контейнера (window.width * количество элементов), который затем разрешал бы гибкость: 1 на каждом изображении ребенка что вы ожидаете.

К сожалению, в настоящее время нет способа, чтобы принести ширину окна (пока) https://github.com/facebook/react-native/pull/418

На данный момент, кажется, как жесткие размеры кодирования является единственным вариантом.

Answer 2

Чтобы установить размеры изображения используйте следующий код:

var Dimensions = require('Dimensions'); 
var windowSize = Dimensions.get('window'); 

...

image: { 
    width: windowSize.width, 
    height: windowSize.height, 
    flex: 1, 
    backgroundColor: 'rgba(0,0,0,0)', 
}