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