如何在React Native中不使用CSS填充而在视图元素之间添加额外的空间?
我想在React Native中美化一下屏幕。我有一些视图,其中包含文本元素。我需要在这些视图之间留出更多的空间,我尝试设置alignItems:“space around”和其他类似的指令,但没有任何效果 这是代码,下面是一个屏幕截图,我在其中绘制了红色箭头,以指示在何处添加一些空白:如何在React Native中不使用CSS填充而在视图元素之间添加额外的空间?,css,react-native,padding,Css,React Native,Padding,我想在React Native中美化一下屏幕。我有一些视图,其中包含文本元素。我需要在这些视图之间留出更多的空间,我尝试设置alignItems:“space around”和其他类似的指令,但没有任何效果 这是代码,下面是一个屏幕截图,我在其中绘制了红色箭头,以指示在何处添加一些空白: export default class UserProfile extends Component { render() { const {UserInfo} = this.props
export default class UserProfile extends Component {
render() {
const {UserInfo} = this.props;
return (
<SafeAreaView>
<View style={styles.container}>
<View style={styles.topView}/>
<View style={styles.headerView}>
<Text style={styles.headerText}>Welcome: {UserInfo.userName}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>User ID:</Text><Text style={styles.itemText}>{UserInfo.userID}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>First Name:</Text><Text style={styles.itemText}>{UserInfo.userFName}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>Last Name:</Text><Text style={styles.itemText}>{UserInfo.userLName}</Text>
</View>
<View style={styles.itemView}>
<Text style={styles.itemTextTitle}>Status:</Text><Text style={styles.itemText}>{UserInfo.userStatus}</Text>
</View>
<View style={styles.bottomView}/>
</View>
</SafeAreaView>
);
}
}
const styles = StyleSheet.create({
topView: {
flex: 3
},
bottomView: {
flex: 3
},
headerView: {flex:1 },
headerText: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans},
itemView: {flex:1 },
itemTextTitle: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans, fontSize: 20, fontWeight: '500'},
itemText: {flex:1, textAlign: 'center', fontFamily: globalStyles.fonts.OpenSans, fontSize: 18, fontWeight: '200'},
textStyle: {
flex:1,
fontSize: 20,
fontFamily: globalStyles.fonts.OpenSans,
fontWeight: '600',
color: globalStyles.colors.customerGreen,
textAlign: 'center',
},
container: {
display: 'flex',
alignContent: 'center',
},
buttonStyle: {
flex: 1,
padding: 10,
backgroundColor: '#ffffff',
borderRadius: 7,
}
});
安全区域视图会阻止样式工作,容器样式应该在其上工作
查看我在《零食》中制作的演示:
将marginBottom:10添加到ItemView您希望间距是特定的还是任意值?你想用保证金吗?你可以用保证金作为well@GauravRoy我想理解为什么我不能使用“周围空间”,可能是因为我根本不清楚Flex在React Native中是如何工作的。因为您没有固定的容器高度。据我所知,您的容器高度是动态的,并基于内部的项目。