减少React Native视图的垂直空间

Question

我有一部分代码似乎有问题。如图所示，垂直的数据行占用了太多的空间。指定视图高度或不指定视图高度对间距没有影响。根据检查人员的观点，边距和填充似乎为零，尽管某些元素未出现在模拟器中。不论高度，内边距和边距如何，都会导致这种过多的间距？

const rghsHdcapCardStyles = StyleSheet.create({
container: {
backgroundColor: '#000000',
height: 355,
},
name: {
fontSize: 16,

},
greyHeading: {
backgroundColor: '#dedede',
margin: 0,
width: '100%',
color: 'white',
},
row: {
height: 22,
flex: 5,
flexDirection: 'row',
backgroundColor: '#aef',
},
alternateRow: {
height: 22,
flex: 5,
flexDirection: 'row',
backgroundColor: '#cdcdcd',
},
score: {
width: '24%',
color: 'white',
textAlign: 'center',
},
superlativeRow: {
flexDirection: 'row',
flex: 3,
},
boldSuperlatives: {
fontWeight: 'bold',
fontSize: 16,
flexDirection: 'row',
flex: 1,
},
label: {
fontSize: 12,
flexDirection: 'row',
flex: 1,
},
});

return (
<View style={[styles.container, {alignContent: 'flex-start'}]}>
<View style={{
width: 345,
backgroundColor: 'white',
padding: 5,
marginTop: 10,
alignContent: 'flex-start',
justifyContent: 'space-between',
flex: 1,
flexDirection: 'column',
}}>
<View style={{marginBottom: 0, height: 44, flex: 2, flexDirection: 'row', alignContent: 'flex-start', }}>
<View style={{height: 44, flex: 1, flexDirection: 'column'}}>
<Text style={[rghsHdcapCardStyles.name, {fontWeight: 'bold', }]}>{name}</Text>
<Text style={[rghsHdcapCardStyles.name, ]}>Club Name</Text>
</View>
<View style={{height: 44, flex: 1, flexDirection: 'column', }}>
<Text style={[rghsHdcapCardStyles.name, {textAlign: 'right', }]}>Network Number</Text>
<Text style={[rghsHdcapCardStyles.name, {textAlign: 'right', }]}>{glfId}</Text>
</View>
</View>

<View style={{
height: 88,
flexDirection: 'row',
flex: 2,
marginTop: 0,
}}>
<View
style={{
height: 77,
width: '40%',
flex: 2,
flexDirection: 'row',
padding: 5,
borderWidth: 2,
borderColor: '#ddddff',
justifyContent: 'space-around',
}}>
<View style={{flex: 1, flexDirection: 'column', }}>
<Text>18-Hole</Text>
<Text>Base</Text>
<Text>{this.state.sBaseHandicap18H}</Text>
</View>
<View style={{flex: 1, flexDirection: 'column', }}>
<Text>9-Hole</Text>
<Text>Base</Text>
<Text>{this.state.sBaseHandicap9H}</Text>
</View>
</View>

<View style={{height: 77, flex: 2, flexDirection: 'row', padding: 5, justifyContent: 'space-around', }}>
<View style={{flex: 2, flexDirection: 'column', padding: 5, justifyContent: 'space-around', }}>
<Text>18-Hole</Text>
<Text>Rounds YTD</Text>
<Text>{this.state.sRoundsYTD18}</Text>
</View>
<View style={{alignContent: 'center', }}>
<Text>9-Hole</Text>
<Text>Rounds YTD</Text>
<Text>{this.state.sRoundsYTD9}</Text>
</View>
</View>
</View>