将时间添加到 React Native Elements ListItem

Question

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

<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 as the docs 说

的 默认行为

provide a rightTitle to have a title show up on the right side of the button

为此，您可以将 rightTitleContainerStyle 添加为

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

将时间添加到 React Native Elements ListItem

Adding time ago to React Native Elements ListItem

react-native

react-native-flatlist

react-native-elements