ContentMessageCell.js 5.68 KB
/**
 * Created by zzz on 2019/3/12.
 */
'use strict';

import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, ListView, StyleSheet, Text, TouchableOpacity, View, NativeModules} from 'react-native';
import {Immutable} from "immutable";
import YH_Image from '../../../common/components/YH_Image';

export default class ContentMessageCellView extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let ico = 'http://head.static.yhbimg.com/yhb-head/2018/07/02/16/01fc258bbe83d5b332f3b2631897b80ec9.591188.jpg?imageView2/{mode}/w/{width}/h/{height}';
        let picUrl = 'http://img10.static.yhbimg.com/unionimg/2018/09/11/16/012d77a863813f5789f7b9cb92a561ec87.jpg';
        let imageUrl = YH_Image.getSlicedUrl(ico, 50, 50, 2);
        let status = true;

        function onReplyPress() {
            // NativeModules.YH_CommonHelper.showkeyBoardView();
        }

        return (
          <View>
              <View style={styles.headerBackground}>
                  <YH_Image style={styles.headIcon} url={imageUrl} circle={true}/>
                  <View style={styles.textView}>
                      <Text style={styles.nicknameText}>社区用户昵称</Text>
                      <Text style={styles.subnameText}>赞了你</Text>
                  </View>
                  <TouchableOpacity activeOpacity={1} style={styles.replyContainer} onPress={()=> {onReplyPress()}}>
                      <Image style={styles.replyImage} source={require('../../images/content_reply.png')}/>
                  </TouchableOpacity>
              </View>

              <View style={styles.replyTextView}>
                  <Text style={styles.replyText} numberOfLines={2}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢,我也很喜欢,太棒了</Text>
              </View>

              { status ?

              <View style={styles.ownerReplyView}>
                <Text style={{paddingLeft: 10, paddingTop: 14, paddingRight: 1, paddingBottom: 12}}>
                  <Text style={styles.replyText}>我的评论:</Text>
                  <Text style={styles.defaultReplyText} numberOfLines={2}>送你一颗小心心,这个鞋子也是我很想入的一款。非常酷棒极了,详情具体关注你的后续文章</Text>
                </Text>
              </View>

              :

              <TouchableOpacity activeOpacity={1} onPress={() => {}}>
                  <View style={ styles.originContainerView} >
                    <Text style={styles.copyText}>原文</Text>
                    <YH_Image url={picUrl} style={styles.imageStyle} />
                    <Text style={styles.originText} numberOfLines={1}>这款Acne Studios 推出全新「The Johnny Winter Project」系列的东西很好很不错呢,我也很喜欢,太棒了</Text>
                  </View>
              </TouchableOpacity> }

              <View style={styles.timeView}>
                <Text style={styles.startTimeText}>{'2018.03.05'}</Text>
              </View>
              <View style={styles.lineView}/>
          </View>
        );
    }
}

let { width, height } = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 375;
const DEVICE_HEIGHT_RATIO = height / 667;

let styles = StyleSheet.create({
    headerBackground: {
        width: width,
        height: 70,
        backgroundColor: 'white',
        flexDirection: 'row',
    },
    headIcon: {
        width: 40,
        height: 40,
        marginLeft: 15,
        marginTop: 15,
        marginRight:10,
        overflow: 'hidden',
        borderRadius: 20,
    },
    textView: {
        flexDirection: 'column',
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        marginTop: 18,
        marginBottom: 15,
    },
    nicknameText: {
        fontSize: 14,
        fontFamily: 'PingFang-SC-Medium',
        color: '#222222',
    },
    subnameText: {
        fontSize: 12,
        fontFamily: 'PingFang-SC-Regular',
        color: '#B0B0B0',
    },
    replyContainer: {
        position: 'absolute',
        top: 23,
        right: 15,
        width: 60,
        height: 25,
    },
    replyImage: {
        width: 60,
        height: 25,
    },
    replyTextView: {
        width: width - 30,
        marginBottom: 15,
        marginLeft: 15,
    },
    replyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#444444',
    },
    ownerReplyView : {
      flexDirection: 'row',
      alignItems: 'center',
      width: width - 30,
      marginLeft: 15,
      backgroundColor: '#F0F0F0',
      marginBottom: 10,
    },
    defaultReplyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#a8a8a8',
    },
    originContainerView: {
      flex: 1,
      marginLeft: 15,
      marginRight: 15,
      marginBottom: 10,
      backgroundColor: '#f0f0f0'
    },
    copyText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#444444',
      marginTop: 10,
      marginLeft: 9,
    },
    imageStyle: {
      marginTop: 10,
      marginBottom: 4,
      marginLeft: 9,
      width: 50 * DEVICE_HEIGHT_RATIO,
      height: 50 * DEVICE_HEIGHT_RATIO,
    },
    originText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#b0b0b0',
      marginLeft: 9,
      marginRight: 16,
      marginBottom: 9,
    },
    timeView: {
      alignItems: 'flex-start',
      marginBottom: 10,
      marginLeft: 15,
    },
    startTimeText: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#B0B0B0',
      height: 17
    },
    lineView: {
      marginLeft:15,
      marginRight: 0,
      width: width-15,
      height: 1,
      backgroundColor: '#e0e0e0'
    },
    });