我在使用这张 React Native Paper 卡片时遇到了一些问题,我需要垂直对齐标题,但 justifyContent
几乎被忽略了。
这是 Card我一直在努力。
const UnitCard = (props) => {
return (
<Card style={styles.card}>
<Card.Content style={styles.cardContent}>
<Title>UNIT CARD</Title>
<Headline>Mt</Headline>
</Card.Content>
</Card>
);
};
这是样式表,我已经按照建议尝试使用 justifyContent
和 allignItems
here
const styles = StyleSheet.create({
card: {
backgroundColor: "skyblue",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
flex: 1,
},
cardContent: {
backgroundColor: "coral",
display: "flex",
flexDirection: "row"
},
});
这是我设备的截图
最佳答案
我是 React-Native 的新手,但像这样的东西帮助了我。
我所做的是,我把一张Card 做成了一个圆圈,在它的Card.Content 里面,我让它占据了Card的所有空间strong> 并使其成为圆形,然后我编写了属性以将所有 View 置于 Card.Content 部分的中心。
<Card style={styles.cardCircle}>
<Card.Content style={styles.cardCircleContent}>
<Text>{"here"}</Text>
</Card.Content>
</Card>
const styles = StyleSheet.create({
cardCircle: {
borderRadius: 100,
width: 140,
height: 140,
backgroundColor: "red",
elevation: 10,
},
cardCircleContent: {
flex: 1,
borderRadius: 100,
justifyContent: "center",
alignItems: "center",
},
});
关于reactjs - React Native Paper 水平和垂直对齐卡片内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62012885/