2

我正在尝试在 React Native 中使用 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: {
  flex: 1,
  backgroundColor: '#000000',
}

图片风格：

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

2 回答 2

8

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

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

...

image: {
  width: windowSize.width,
  height: windowSize.height,
  flex: 1,
  backgroundColor: 'rgba(0,0,0,0)',
}
于 2015-05-03T10:50:13.430 回答
0

我不相信现在仅使用 Flex 就可以实现这一点，因为它将尝试将所有图像包含在您的容器中。

但是， ScrollView 确实有一个contentContainerStyle={}属性，所以我可以设想一个解决方案，比如将容器的宽度设置为 (window.width * 项目数)，然后允许每个图像子项上的 flex:1 执行您期望的操作。

不幸的是，目前没有办法获取窗口宽度（还） https://github.com/facebook/react-native/pull/418

目前，硬编码维度似乎是唯一的选择。

于 2015-03-30T17:42:37.180 回答