删除react本机ScrollView中的图像填充

Question

我正在尝试将图像组件添加到我的文章scrollView中，并使用resizeMode="包含"；缩小图像以适应纵向屏幕。ReactNative正在为图像添加大量填充，我想删除它，但不确定如何删除。

这是一张显示填充的屏幕截图

这是我的scrollView js代码：

<View style={styles.scrollViewContainer}>
<ScrollView style={styles.scrollView}>
<View>
<Text style={styles.title}>{GetTitle(article.title)}</Text>
<Text style={styles.author}>
{GetSource(article.title)}
{article.author == null ? " - " : " - " + article.author + " - "}
{article.publishedAt.slice(0, 10)}
</Text>
{article.urlToImage != null ? (
<Image
style={styles.image}
source={{ uri: article.urlToImage }}
resizeMode="contain"
/>
) : (
<View style={styles.buffer}></View>
)}
<Text style={styles.content}>{article.content}</Text>
</View>
</ScrollView>
</View>

以及相关样式：

const styles = StyleSheet.create({
author: {
color: "#fff",
fontSize: 16,
},
buffer: {
height: 10,
},
caption: {
fontSize: 10,
color: "white",
},
container: {
flex: 1,
backgroundColor: "black",
},
content: {
fontSize: 14,
color: "white",
},
image: {
alignContent: "center",
width: "100%",
height: "100%",
},
scrollView: {
backgroundColor: "grey",
},
scrollViewContainer: {
flex: 1,
},
title: {
color: "#fff",
fontWeight: "500",
fontSize: 40,
},
});

Answer 1

从图像样式中删除height: "100%"。