javascript - 在分页 ScrollView 中 react native 灵活的 View 大小

Question

我正在尝试在 React Native 中使用 ScrollView(启用分页)来分页浏览一系列图像。任何人都知道如何使 ImageView 填充 ScrollView 的每一页？到目前为止，我只对图像样式的宽度和高度值进行了硬编码。

我大致是这样的:

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

要设置图像尺寸，请使用下一个代码:

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

...

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