列表中项目的水平对齐

Question

我在 react-native 中有一个带有手风琴的列表，使用 react-native-paper 中的列表包制作。它有效，但我想伸出援助之手来改善美学方面。正如您在下面的屏幕截图中看到的，objects 的数量与其他元素不对齐。同样，但这是一个奖励，我希望标题居中，在数量和价格之间。这有点复杂，我尝试添加样式但不适用。我在 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>

Answer 1

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

.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>

Answer 2

可以通过将样式应用到 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,
    }

})

列表中项目的水平对齐

Horizontal alignment of items in a list

javascript

list

alignment

react-native