将时间前添加到 React Native Elements ListItem

Question

我使用React Native Elements ListItem 来渲染我的FlatList 项目。我想在与标题相同的行中设置 timeago 文本（例如：20 Minutes Ago）。但是当我将字幕行数设置为 5 时，timeago 文本会出现在字幕行中。我该如何解决这个问题？

<FlatList
  data={this.props.data}
  renderItem={({item}) => (
    <ListItem
      roundAvatar={true}
      avatar={{uri: item.picture.thumbnail}}
      title={`${item.name.first} ${item.name.last}`}
      titleStyle={styles.title}
      rightTitle="20 Minutes Ago"
      rightTitleStyle={styles.rightTitle}
      rightTitleContainerStyle={styles.rightTitleContainer}
      //  subtitle="This is a sample comment which was commented by the developer."
      subtitleStyle={styles.subtitle}
      subtitleContainerStyle={styles.subtitleContainer}
      subtitleNumberOfLines={5}
      hideChevron={true}
      containerStyle={styles.flatListContainer}
    />
  )}
  keyExtractor={item => item.email}
  ItemSeparatorComponent={this.seperator}
  onRefresh={this.handleRefresh}
  refreshing={this.props.refreshing}
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={50}
/>

Answer 1

垂直居中是rightTitle的默认行为，就像docs说的那样

提供 rightTitle 以在按钮右侧显示标题

为此，您可以将rightTitleContainerStyle 添加为

{position: 'absolute', top: (YOUR_TITLE_FONT_SIZE - YOUR_RIGHT_TITLE_FONT_SIZE) / 2, right: 0}