Question

我正在尝试在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>
  );
}

图像显示的唯一方法是如果我在样式中硬编码宽度/高度数字。我一直无法让图像只是弯曲以填充整整一页。

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 *项目数），然后允许flex：1 image child做你期望的事。

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

目前似乎硬编码尺寸是唯一的选择。

在分页的scrollview中反映Native灵活视图大小

1 个答案: