Question

我难以对齐元素。我尝试将我的元素（过期）和（当前余额）并排对齐，但相反，它们会在另一个上面显示一个元素。通常我会使用float来解决这个问题，但RN并不支持它。如何将这两个元素对齐以水平显示？

  <View style={styles.header} key={i}>

        <View style={styles.headerthing}>
        <Text style={styles.rowLabelText}>{'Due Today'}</Text>
        <Text style={styles.rowLabelnum} >{accounting.formatMoney(rows.AMOUNT_DUE_NOW_INC_LC)}</Text>
        </View>

        <View style={styles.headerthing2}>
        <Text style={styles.rowLabelText}>{'Past Due'}</Text>
        <Text style={styles.rowLabelnum} >{accounting.formatMoney(rows.AMOUNT_DUE_NOW_INC_LC)}</Text>
        </View>

        <View style={styles.headerthing3}>
        <Text style={styles.rowLabelText}>{'Current Balance'}</Text>
        <Text style={styles.rowLabelnum} >{accounting.formatMoney(rows.AMOUNT_DUE_NOW_INC_LC)}</Text>
        </View>

     </View>

样式......

 header: {
    width: window.width,
    height: window.height * 0.4,

  },


headerthing: {
        alignItems: 'center',
            flex: 1,
  },


   headerthing2: {
        alignItems: 'flex-start',
            flex: 1,    
  },


   headerthing3: {
        alignItems: 'flex-end',
            flex: 1,

  },

  rowLabelnum: {
  fontFamily: 'PT_SANS-WEB-REGULAR',
    fontSize: 30,
  color : '#FFFFFF',
  },

rowLabelText: {
 fontFamily: 'PT_SANS-WEB-BOLD',
    fontSize: 28,
  color : '#FFFFFF',
  },

Answer 1

在react-native中，您可以使用flexDirection样式属性控制方向。所以你可以改成像

这样的东西

    <View style={styles.headerthing}>
    <Text style={styles.rowLabelText}>{'Due Today'}</Text>
    <Text style={styles.rowLabelnum} >{accounting.formatMoney(rows.AMOUNT_DUE_NOW_INC_LC)}</Text>
    </View>

   <View style={{flex:1, flexDirection: row}}>
    <View style={styles.headerthing2}>
    <Text style={styles.rowLabelText}>{'Past Due'}</Text>
    <Text style={styles.rowLabelnum} >{accounting.formatMoney(rows.AMOUNT_DUE_NOW_INC_LC)}</Text>
    </View>

    <View style={styles.headerthing3}>
    <Text style={styles.rowLabelText}>{'Current Balance'}</Text>
    <Text style={styles.rowLabelnum} >{accounting.formatMoney(rows.AMOUNT_DUE_NOW_INC_LC)}</Text>
    </View>
   </View>
 </View>

Answer 2

css很简单，但用您的班级替换我的grid班级，在您的情况下猜测它是header ..

.grid {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  background: blue; color: white;
}
.headerthing{
  flex: 0 0 100%;
}
.headerthing2, .headerthing3{
  flex: 1;
}
.rowLabelnum{
  font-family: 'PT_SANS-WEB-BOLD'; font-size: 30px; color: '#FFFFFF';
}
.rowLabelText{
  font-family: 'PT_SANS-WEB-BOLD'; font-size: 28px; color: '#FFFFFF';
}

<div class="grid">
  <div class="headerthing">
    <p class="rowLabelText">Due Today</p>
    <p class="rowLabelnum">$485.66</p>
  </div>
  <div class="headerthing2">
    <p class="rowLabelText">Past Today</p>
    <p class="rowLabelnum">$485.66</p>
  </div>
  <div class="headerthing3">
    <p class="rowLabelText">Current Balance</p>
    <p class="rowLabelnum">$485.66</p>
  </div>
</div>

在React-Native中将行与Flex-Box对齐

2 个答案: