List里面的item布局

最新推荐文章于 2024-07-09 17:05:16 发布

史蒂芬啊

最新推荐文章于 2024-07-09 17:05:16 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qq_42832884/article/details/82734796

版权

import React, { Component } from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import timeago from "timeago.js";

export default class Item extends Component {
  render() {
    const timeagoInstance = timeago(); //格式日期
    return (
      <View style={styles.box}>
        <Text style={styles.title}>{this.props.item.title}</Text>
        <View style={styles.container}>
          <View style={styles.left}>
            <Image
              style={styles.avatar}
              source={{ uri: this.props.item.author.avatar_url }}
            />
            <View>
              <Text>{this.props.item.author.loginname}</Text>
              <Text>
                {timeagoInstance.format(this.props.item.create_at, "zh_CN")}
              </Text>
            </View>
          </View>
          <View>
            <Text>
              阅读量：
              {this.props.item.visit_count}
            </Text>
            <Text>
              回复量：
              {this.props.item.reply_count}
            </Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  box: {
    padding: 10,
    borderBottomWidth: 1,
    borderColor: "#ddd"
  },
  container: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    marginTop: 5
  },
  left: {
    flexDirection: "row",
    alignItems: "center"
  },
  avatar: {
    width: 60,
    height: 60,
    borderRadius: 30,
    marginRight: 10
  },
  title: {
    fontWeight: "bold"
  }
});