123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- /**
- * Created by zack on 2018/5/22.
- */
- import {
- View,
- Text,
- StyleSheet,
- FlatList,
- Platform,
- TouchableOpacity,
- ImageBackground,
- Image
- } from 'react-native'
- import React, {Component} from 'react'
- import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../../utils/DimensionsTools'
- import ImageLoader from 'react-native-smart-image-loader'
- import {CachedImage} from 'react-native-img-cache'
-
- export default class PicAndTextDetailCommentItem extends Component {
- constructor(props) {
- super(props)
- this.state = {
- userName: props.userName,
- userIcon: props.userIcon,
- title: props.title,
- commentCount: props.commentCount,
- likes: props.likes,
- shares: props.shares,
- isLiked: props.isLiked
- }
- }
-
- componentWillReceiveProps(props) {
- this.setState({
- userName: props.userName,
- userIcon: props.userIcon,
- title: props.title,
- commentCount: props.commentCount,
- likes: props.likes,
- shares: props.shares,
- isLiked: props.isLiked
- })
- }
-
- shouldComponentUpdate(nextProps) {
- if (nextProps.userName !== this.state.userName ||
- nextProps.title !== this.state.title ||
- nextProps.commentCount !== this.state.commentCount ||
- nextProps.likes !== this.state.likes ||
- nextProps.shares !== this.state.shares ||
- nextProps.userIcon !== this.state.userIcon ||
- nextProps.isLiked !== this.state.isLiked
- ) {
- return true
- }
-
- return false
- }
-
- render() {
- return(
- <View style={styles.View}>
- <ImageLoader
- style={[styles.HeaderImageView, {borderRadius: 24,}]}
- options={{
- src: this.state.userIcon,
- }}
- />
- <View style={styles.CommentBgView}>
- <Text style={styles.UserName}>{this.state.userName}</Text>
- <Text style={styles.CommentContent}>{this.state.title}</Text>
- <Text style={styles.TimeText}>{'2018/12/27 18:00'}</Text>
- </View>
-
- <TouchableOpacity style={styles.LikeBgView}>
- <Image source={this.state.isLiked ? require('../../../../resources/images/TabBar/PicAndText/like_hover.png') : require('../../../../resources/images/TabBar/PicAndText/like.png')}/>
- <Text style={styles.LikeNumberText}>{this.state.likes}</Text>
- </TouchableOpacity>
-
- <View style={styles.BottomLineView}/>
- </View>
- )
- }
- }
-
- const styles = StyleSheet.create({
- View: {
- width: ScreenDimensions.width,
- flexDirection: 'row',
- justifyContent: 'space-between',
- backgroundColor: 'white'
- },
- HeaderImageView: {
- width: 48,
- height: 48,
- marginLeft: 24,
- marginTop: 16,
- },
- CommentBgView: {
- marginLeft: 34,
- marginTop: 16,
- width: ScreenDimensions.width - 24 - 48 - 34 - 20 - 22,
- marginBottom: 16,
- },
- UserName: {
- fontSize: 15,
- color: '#000000',
- },
- CommentContent: {
- fontSize: 15,
- color: '#000000',
- marginTop: 15,
- },
- TimeText: {
- fontSize: 13,
- color: '#9c9c9c',
- marginTop: 12,
- },
- LikeBgView: {
- marginTop: 16,
- marginRight: 22,
- },
- LikeNumberText: {
- fontSize: 12,
- color: '#9c9c9c',
- marginTop: 8,
- textAlign: 'center'
- },
- BottomLineView: {
- width: ScreenDimensions.width,
- height: 0.5,
- backgroundColor: '#efeff4',
- position: 'absolute',
- left: 0,
- bottom: 0,
- }
- })
|