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

【问题标题】：Is there a way for keeping the title aligned, when adding a subtitle, in React Native Elements?在 React Native Elements 中添加字幕时，有没有办法保持标题对齐？
【发布时间】：2018-08-24 13:12:04
【问题描述】：

我正在使用 React Native Elements (1.0) 来显示我的 <ListItem />s。我想知道是否有办法让标题与添加字幕时保持在同一行？

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

我想要的是与“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={() => {}}
/>

【问题讨论】：

你可以使用 flex-start

标签： react-native listitem react-native-flatlist

【解决方案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' }}
/>

【讨论】：