在React Native Elements中添加字幕时，有没有办法使标题保持对齐？

Question

我正在使用React Native Elements（1.0）来显示我的<ListItem />。我想知道是否有一种方法可以使标题保持与添加字幕时相同的行？

这是我目前拥有的，这是错误的：

我想要的是与“ Filterkaffee”和“ Klein”对齐的“ 1x”，并在下面显示字幕。

编辑

这也是ListItem的代码：

<ListItem
  title={item.name}
  leftElement=<Text style={styles.amount}>{item.amount}x</Text>
  rightTitle={`${item.price.label}`}
  subtitle={`${
    item.items.length > 0
      ? item.customChoiceItems.reduce((acc, customChoiceItem, index, arr) => {
          acc += customChoiceItem.name;
          acc += index < arr.length - 1 ? "\n" : "";
          return acc;
        }, "")
      : null
  }`}
  onPress={() => {}}
/>

Answer 1

由于您在ListItem组件上使用leftElement道具；我假设您正在使用react-native-elements的1.0.0-beta5版。

ListItem组件具有一个containerStyle道具，可用于控制容器的样式。默认情况下，它具有alignItems: 'center'规则，该规则允许ListItem的内容垂直居中。由于要将它们对齐到顶部，因此可以使用alignItems: 'flex-start'。

<ListItem
  title="Filterkaffee"
  leftElement={<Text style={styles.amount}>1x</Text>}
  subtitle="Medium Roast Schokosojakeks"
  rightTitle="Klein"
  containerStyle={{ alignItems: 'flex-start' }}
/>