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

4si2a6ki  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(136)

因此,我试图格式化我的发票,其中我的到期金额和金额值显示在一行上,该行下方我想显示已付金额和余额。然而,现在它们都在同一行上,我尝试使用{"\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>

字符串

oknrviil

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>

相关问题