布局 item
发布于 6 年前 作者 s123rr 1567 次浏览 来自 客户端测试

import React, { Component } from “react”; import { View, Text, StyleSheet, Image } from “react-native”; import timeago from “timeago.js”; export default class Item extends Component { render() { const timeagoInstance = timeago(); return ( <View style={style.box}> <Text style={style.zizi}>{this.props.item.title}</Text> <View style={style.container}> <View style={style.left}> <Image style={style.tu} source={{ uri: this.props.item.author.avatar_url }} /> <Text>{this.props.item.author.loginname}</Text> </View> <View> <Text> 阅读量: {this.props.item.visit_count} </Text> <Text> 创建日期: {timeagoInstance.format(this.props.item.create_at, “zh_CN”)} </Text> </View> </View> </View> ); } } const style = StyleSheet.create({ box: { padding: 15, borderColor: “gray”, borderBottomWidth: 1, borderColor: “black” }, container: { flexDirection: “row”, justifyContent: “space-between”, alignItems: “center”, marginTop: 5 }, left: { flexDirection: “row”, alignItems: “center” }, tu: { width: 50, height: 50, borderRadius: 60, marginRight: 10 }, zizi: { fontSize: 15, color: “black”, fontWeight: “bold” } });

1 回复
回到顶部