Есть ли способ сохранить выравнивание заголовка при добавлении субтитров в 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

Поскольку вы используете опору leftElement в компоненте ListItem; Я предполагаю, что вы используете версию 1.0.0-beta5 response-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' }}
/>