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

Question

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

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

我想要的是“1x”与“Filterkaffee”和“Klein”对齐，并在下面有副标题。

编辑

这里还有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 prop;我假设你正在使用版本1.0.0-beta5的react-native-elements。

ListItem组件有一个containerStyle prop，可用于控制容器的样式。默认情况下，它有一个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' }}
/>