css - 如何在不使用 React Native 中的 CSS 填充的情况下在 View 元素之间添加额外的空间?
问题描述
我正在尝试在 React Native 中美化一点屏幕。我有一些 View 里面有 Text 元素。我需要在这些视图之间留出更多空间,我尝试设置alignItems: 'space-around'
和其他类似指令但没有任何效果。
有代码,在它下面有一个屏幕截图,我在其中绘制了红色箭头来指示我要在哪里添加一些空白:
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,
}
});
解决方案
推荐阅读
- java - Java 错误中的 Ascii 字符计数器
- c++ - Eigen 仅允许 A 矩阵中动态列数的薄 SVD
- java - Java中的动态VectorDrawable动画而不是动画矢量drawable
- javascript - 来自 jquery typer 的随机响应
- javascript - Vue.js 2.x 选择内部组件没有获得价值
- bash - 模式匹配时获取特定的行集
- c# - wpf 列表框滚动和文本框输入键操作
- android - 使用带有 playstore url 的分支深度链接的最低版本级别是多少?
- jenkins - 詹金斯的工作陷入了身份验证领域
- node.js - 第一页和第二页可以有不同的页眉和页脚吗?