列表中项目的水平对齐

如何解决列表中项目的水平对齐

我有一个带有 react-native 的手风琴列表，使用 react-native-paper 中的 List 包制作。它有效，但我想要帮助改善美学方面。 正如您在下面的屏幕截图中看到的，对象的数量与其他元素不对齐。同样，但这是一个奖励，我希望标题在数量和价格之间居中。这有点复杂，我尝试添加样式，但这并不适用。 我在 list.item 和 list.accordion 中尝试过：

style={{justifyContent: 'space-between',alignItems: 'center'}}

我想知道您是否可以给我任何线索、建议或您的解决方案。

感谢您的帮助

<List.Section title={item.created_at.substring(0,10)} titleStyle={{fontSize: 16,color: '#013243'}} key={i.toString()}>
            <List.Accordion
              title={item.quote_number}
              style={{width: '98%'}}
              left={props => <List.Icon {...props} color={'#F78400'} icon={require('../../../assets/images/logo.png')} />}>
              <List.Item titleStyle={{color: '#F78400'}} title={`Total: ${item.amount} €`}/>
              {
                item.items.map((product,i) => (
                  <List.Item
                    title={product.name.substring(0,30)}
                    titleStyle={{fontSize: 14}}
                    description={product.description}
                    descriptionStyle={{fontSize: 11}}
                    descriptionNumberOfLines={4}
                    key={i.toString()}
                    left={()=>(<Text>{product.quantity}</Text>)}
                    right={()=>(<Text>{product.cost} €</Text>)}
                  />
                ))
              }
            </List.Accordion>
          </List.Section>

解决方法

您可以轻松地在每个项目中添加适当的样式。检查波纹管片段。通过这种方式，您可以垂直对齐对象的数量，并且标题也居中。

.product {
  width: 500px;
  height: 100px;
  background-color: black;
  color: white;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center
}

<div class="product">
  <div>1</div>
  <div>Product 1 title</div>
  <div>234.54$</div>
</div>

,

可以通过将样式应用于 left 和 right 道具来纠正，如下所示：

<List.Item
title={product.name.substring(0,30)}
titleStyle={{fontSize: 14}}
description={product.description}
descriptionStyle={{fontSize: 11}}
descriptionNumberOfLines={4}
key={i.toString()}
left={()=>(<Text style = {styles.textStyle}>{product.quantity}</Text>)} // styled
right={()=>(<Text style = {styles.textStyle}>{product.cost} €</Text>)} // styled
/>

const styles = Stylesheet.create({
    textStyle: {
        marginTop: 4,// you may adjust this value according to your requirement
        fontSize: 14,}

})