Question

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

  <View style={styles.container}>
        <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说

提供一个权利标题，让标题显示在按钮的右侧

为此，您可以将rightTitleContainerStyle添加为

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

将时间添加到React Native Elements ListItem

1 个答案: