在分页滚动视图中反应原生灵活视图大小答案

【问题标题】：React Native flexible view sizing within a paged scrollview在分页滚动视图中反应原生灵活视图大小
【发布时间】：2015-06-01 23:40:33
【问题描述】：

我正在尝试在 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 样式：

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

图片风格：

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

【问题讨论】：

你能展示你的容器的样式吗？ flex 的东西通常取决于父母发生了什么。
我在原始帖子中添加了滚动视图和图像样式。我还尝试在 <ScrollView> 元素上添加 contentContainerStyle={{flex:1}}。

标签： javascript ios node.js reactjs react-native

【解决方案1】：

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

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

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

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

【讨论】：

如果您注意到答案正上方，您会看到 react native 提供了一个名为 Dimensions 的导入，您可以使用它来检索窗口的高度和宽度。它就像一个魅力！

【解决方案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)',
}

【讨论】：