时间戳

首页 > 解决方案 > React Native Paper 水平和垂直对齐卡片内容

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

问题描述

我在使用这张 React Native Paper 卡片时遇到了一些问题，我需要垂直对齐标题，但justifyContent几乎被忽略了。这是我一直在制作的卡片。

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的建议

const styles = StyleSheet.create({
  card: {
    backgroundColor: "skyblue",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    flex: 1,
  },
  cardContent: {
    backgroundColor: "coral",
    display: "flex",
    flexDirection: "row"
  },
});

这是我的设备的屏幕截图

标签： reactjsreact-native

解决方案

我是 React-Native 的新手，但这样的事情帮助了我。

我所做的是我拿了一张卡片把它做成了一个圆圈，在它的Card.Content里面我让它占据了卡片的所有空间，也让它变成了圆圈，然后我写了属性来把所有的视图放在中心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",
  },
});

推荐阅读