reactjs - React Native Paper 水平和垂直对齐卡片内容

Question

我在使用这张 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"
  },
});

这是我设备的截图

Answer 1

我是 React-Native 的新手，但像这样的东西帮助了我。

我所做的是，我把一张Card 做成了一个圆圈，在它的Card.Content 里面，我让它占据了Card 并使其成为圆形，然后我编写了属性以将所有 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",
  },
});