所以在我的主页上,我有 4 个按钮,我用 flex 布置了这些按钮。我已经设置了父级的 flex: 1,这意味着它覆盖了整个页面(我已经用 backgroundColor 确定了这一点)。我的问题是,当我设置 alignItems: 'flex-end' 时,按钮只会向下移动一点,就好像 flex 只覆盖了一半的页面。
这是我的代码标记:
<Card style={styles.cardStyle}>
<CardSection style={styles.containerStyle}>
<Button onPress={() => navigate("NewScreen")}>
New
</Button>
</CardSection>
<CardSection style={styles.containerStyle}>
<Button onPress={() => navigate("SavedScreen")}>
Saved
</Button>
</CardSection>
<CardSection style={styles.containerStyle}>
<Button onPress={() => navigate("ParametersScreen")}>
Settings
</Button>
</CardSection>
<CardSection style={styles.containerStyle}>
<Button onPress={() => navigate("FMRScreen")}>
FMR
</Button>
</CardSection>
</Card>
卡片样式:
cardStyle: {
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#0000ff',
}
CardSection风格:
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
borderColor: '#ddd',
height: 150,
width: 150,
borderRadius: 20,
marginTop: 10,
},
以及物品的样式:
textStyle: {
color: '#007aff',
fontSize: 20,
fontWeight: '600',
},
buttonStyle: {
backgroundColor: 'rgba(255, 255, 255, 0)',
borderWidth: 0,
borderColor: '#007aff',
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
这就是我得到的:
请注意,如果我删除 flexWrap: 'wrap',这个问题就会消失,但我不能这样做!
有任何想法吗?