在 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 属性；我假设您使用的是 1.0.0-beta5 版本的 react-native-elements.

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' }}
/>

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

Is there a way for keeping the title aligned, when adding a subtitle, in React Native Elements?

listitem

react-native

react-native-flatlist

编辑