如何在react中的组件之间插入新行< text>？

4si2a6ki 于 6个月前发布在 React

关注(0)|答案(1)|浏览(66)

因此，我试图格式化我的发票，其中我的到期金额和金额值显示在一行上，该行下方我想显示已付金额和余额。然而，现在它们都在同一行上，我尝试使用{"\n”}，
但它们都不起作用。这是我的代码，

<View style={styles.section4}>
  <View style={{ flexDirection: "column", justifyContent: "space-between" }}>
    <Text style={{ fontWeight: "bold" }}>Amount Due</Text>
    <Text style={{ fontWeight: "bold" }}>{formatPrice(amountDue)}</Text>
    <Text style={{ fontWeight: "bold", color: "#677589" }}>Amount Paid</Text>
    /* <Text style={{ fontWeight: "bold" }}>{formatPrice(amountPaid)}</Text> */
    <Text style={{ fontWeight: "bold", color: "#677589" }}>Balance Amount</Text>
    <Text style={{ fontWeight: "bold" }}>{formatPrice(balanceAmount)}</Text>
  </View>
</View>

字符串

react-native

来源：https://stackoverflow.com/questions/77430007/how-can-i-insert-a-new-line-between-text-components-in-react

1条答案

按热度按时间

oknrviil1#

有两种方法可供您选择：
1.建立2个栏：

<View style={styles.section4}>
  <View style={{ flexDirection: "column", justifyContent: "space-between" }}>
    <View>
      <Text style={{ fontWeight: "bold" }}>Amount Due</Text>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Amount Paid</Text>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Balance Amount</Text>
    </View>
    <View>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountDue)}</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountPaid)}</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(balanceAmount)}</Text>
    </View>
  </View>
</View>

字符串
1.创建3行：

<View style={styles.section4}>
  <View style={{ flexDirection: "column", justifyContent: "space-between" }}>
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontWeight: "bold" }}>Amount Due</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountDue)}</Text>
    </View>
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Amount Paid</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(amountPaid)}</Text>
    </View>
    <View style={{ flexDirection: "row" }}>
      <Text style={{ fontWeight: "bold", color: "#677589" }}>Balance Amount</Text>
      <Text style={{ fontWeight: "bold" }}>{formatPrice(balanceAmount)}</Text>
    </View>
  </View>
</View>

型

赞(0）回复(0）举报 6个月前

我来回答

如何在react中的组件之间插入新行< text>？

1条答案

相关问题

热门标签

最新问答