Javascript 列表中项目的水平对齐

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

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>

}>
{
item.items.map（（产品，i）=>(
（{product.quantity}）}
右={（）=>（{product.cost}€）}
/>
))
}

---

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

.product{
宽度：500px；
高度：100px；
背景色：黑色；
颜色：白色；
填充物：5px10px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中
}

1.
产品1名称
234.54$

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

.product{
宽度：500px；
高度：100px；
背景色：黑色；
颜色：白色；
填充物：5px10px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中
}

1.
产品1名称
234.54$

可以通过将样式应用于左侧和右侧道具来更正，如下所示：

<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,
    }

})

（{product.quantity}}//已设置样式
右={（）=>（{product.cost}€）}//已设置样式
/>
const styles=Stylesheet.create({
文本样式：{
marginTop:4，//您可以根据需要调整此值
尺寸：14，
}
})

可以通过将样式应用于左侧和右侧道具来更正，如下所示：

<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,
    }

})

（{product.quantity}}//已设置样式
右={（）=>（{product.cost}€）}//已设置样式
/>
const styles=Stylesheet.create({
文本样式：{
marginTop:4，//您可以根据需要调整此值
尺寸：14，
}
})

列表相互嵌套，这是一种不好的做法。在dom中，它可能看起来像这样，高度问题很可能与字体大小有关。因此，您可以使用不同的组件而不是嵌套的列表项，或者尝试编辑元素的边距/填充/字体大小非常感谢您花时间回答，另一方面，我们不使用html代码，而是javascript，没有div/li等。请尝试使用style={{textAlign:'center'}对于左文本和右文本，您使用的库将列表对象转换为JSX元素，并将它们呈现为实际的html。理解代码生成的html结构非常重要。例如，如果您希望确保您的网页可访问或允许测试自动化。。。等等，你的列表相互嵌套，这是一种不好的做法。在dom中，它可能看起来像这样，高度问题很可能与字体大小有关。因此，您可以使用不同的组件而不是嵌套的列表项，或者尝试编辑元素的边距/填充/字体大小非常感谢您花时间回答，另一方面，我们不使用html代码，而是javascript，没有div/li等。请尝试使用style={{textAlign:'center'}对于左文本和右文本，您使用的库将列表对象转换为JSX元素，并将它们呈现为实际的html。理解代码生成的html结构非常重要。例如，如果您希望确保您的网页可访问或允许测试自动化。。。非常感谢您花时间回答，另一方面，我们不是使用html代码，而是javascript，没有div/li等。我知道这不是html，但我写这个示例是为了向您展示您可以使用的样式，以实现您想要的，谢谢，我跟随您并使用“样式”={{justifyContent:'space-between'，alignItems:'center'}但是它不适用。你还必须添加display:“flex”。我期待着告诉我结果。非常感谢你花时间回答，另一方面，我们不是在html代码上，而是在javascript上，没有div/li等。我知道这不是html，但我写这个示例是为了向你展示你可以用来实现e你想要什么，谢谢，我跟着你，使用'style={{{justifyContent:'space-between'，alignItems:'center'}}“但它不适用于您还必须添加display:”flex“。我期待着告诉我结果，但marginTop:4取决于容器项的高度，它不会每次都给出相同的结果@NickPantelism，但出现此样式问题的原因是listitem的父视图”title'组件在插件源文件中被硬编码为marginTop，并且没有可用的道具来设置此父元素的样式。这就是为什么我只给文本元素marginTop:4以保持其简单性。是的，但是marginTop:4取决于容器项的高度，它不会每次都给出相同的结果你是对的@NickPantelism，但是这个样式问题的原因是listitem'title'组件的父视图在插件源文件中被硬编码，并且没有任何道具