小编Jos*_*osh的帖子

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

我正在尝试在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>
  );
}
Run Code Online (Sandbox Code Playgroud)

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

ScrollView风格:

scrollView: {
  flex: 1,
  backgroundColor: '#000000',
}
Run Code Online (Sandbox Code Playgroud)

图像样式:

image: {
  width:375,
  height:667,
  flex: 1,
  backgroundColor: 'rgba(0,0,0,0)',
}
Run Code Online (Sandbox Code Playgroud)

javascript node.js ios reactjs react-native

2
推荐指数
1
解决办法
7391
查看次数

标签 统计

ios ×1

javascript ×1

node.js ×1

react-native ×1

reactjs ×1