QuestionHomeListItem.js 5.54 KB
import React, { Component } from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View, DeviceEventEmitter } from "react-native";

import _ from "lodash";
import { width, zoomH, zoomW } from "../../utils/getSize";
import StashHead from "../../widget/StashHead";
import { NoDoublePress } from "../../utils/utils";
import ItemHeaderInfo from "../../pages/component/ItemHeaderInfo";

export default class QuestionHomeListItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
        threadData:{},//帖子信息
    };
  }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('readNoti',(itemId)=>{
            if (itemId.toString()==this.props.item.id) {
                this.props.item.hasBeenRead = true;
            }
        });
        this.dataHandle(this.props.item);
    }

    compnentWillUnmount() {
        this.subscription.remove();
    }

  /**
   * 接口返回数据处理
   * @param {*} data
   */
  dataHandle(data) {
    if (!!!data) {
      // xnToast("暂无数据!!!");
      return;
    }
    let attachmentList = [];
    let singleItem = {
      id: "",
      name: "",
      attachment: [],
      commentNum: 0,
      userId: ""
    };
    singleItem.isBoardTop = data.irsBoardTop ? data.isBoardTop : false;
    if (data.attachmentList) {
      for (let j = 0; j < data.attachmentList.length; j++) {
        if (j > 2) {
          break;
        }
        let urls = {
          url: ""
        };
        urls.url = data.attachmentList[j].filePath;
        attachmentList.push(urls);
      }
    }
    singleItem.id = data.id;
    singleItem.userId = data.user.id;
    singleItem.name = data.title;
    singleItem.attachment = attachmentList;
    singleItem.commentNum = data.threadStatistics.commentNum;
    this.setState({
      data: singleItem,
      threadData :data,
    });
  }

  _detailClick = id => {



    //详情
    this.props.nav.navigate("QuestionList", {
      id: id,
      userId: this.state.data.userId
    });
  };

  renderView() {
    return (
      <TouchableOpacity
        style={styles.itemBackground}
        activeOpacity={0.8}
        onPress={() => {
          NoDoublePress.onPress(() => {
            this._detailClick(this.state.data.id);
          });
        }}
      >
        <View>
            {/*头部信息*/}
            <ItemHeaderInfo  itemList = {this.state.threadData} nav = {this.props.nav} showType = {this.props.showType}
                             showReport = {this.props.showReport|| false}
                             reportCallback = {()=>{
                                 if (this.props.reportCallback !=undefined){
                                     this.props.reportCallback();
                                 }
                             }}/>
            {/*文字*/}
          <Text
            style={{
              marginTop: 14 / zoomH,
              marginLeft: 15 / zoomW,
                marginRight:15/zoomW,
              fontSize: 18,
                flex:1,
              color: this.props.item.hasBeenRead ? "#999" : "rgba(0,0,0,0.85)",
              fontWeight: "bold"
            }}
            numberOfLines={2}
          >
            {this.state.data.name}
          </Text>

          {/*图片*/}
          {!!this.state.data.attachment &&
            this.state.data.attachment.length > 0 && (
              <View
                style={{
                  flexDirection: "row",
                  alignItems: "center",
                  flexWrap: "wrap",
                  paddingLeft:15/zoomW,
                  paddingRight:15/zoomW,
                  marginTop: 14
                }}
              >
                {this.state.data.attachment
                  ? this.state.data.attachment.map((v, i) =>
                      this.renderImageItem(v, i)
                    )
                  : null}
              </View>
            )}
        </View>
        <TouchableOpacity activeOpacity={0.8} style={styles.starItem}>
            {this.state.data.isBoardTop ? <View style = {{marginLeft:15/zoomW}}>
                    <StashHead  />
                </View>
               : null}
          <Text
            style={{
              fontSize: 12,
              color: "#000000",
              marginTop: 12 / zoomH,
              marginBottom: 14 / zoomH,
              marginLeft: 15 / zoomW,
              opacity: 0.45
            }}
          >
            {this.state.data.commentNum + " 回答"}
          </Text>
        </TouchableOpacity>
          <View style={{ height: 6/zoomH, backgroundColor: "#F3F5F6" }} />

      </TouchableOpacity>
    );
  }

  //渲染图片列表item
  renderImageItem(item, i) {
      let itemWidth = (width - 10-2*15/zoomW) / 3;
    return (
      <View
        key={i}
        style={[
          i < 2 ? { marginRight: 5 } : null,
          {
            width: itemWidth,
            height: itemWidth,

            backgroundColor: "#FFFFFF"
          }
        ]}
      >
        <Image
          style={{ width: "100%", height: "100%" }}
          source={{
            uri: item.url+'?x-oss-process=image/resize,w_'+parseInt(itemWidth*3),
            cache: "force-cache"
          }}
          resizeMode="cover"
        />
      </View>
    );
  }

  render() {
    return (
      <View>
        {_.isEmpty(this.state.data) ? null : <View>{this.renderView()}</View>}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  itemBackground: {
    backgroundColor: "#FFFFFF"
  },
  starItem: {
    flex: 1,
    justifyContent: "flex-start",
      alignItems:'center',
    flexDirection: "row"
  }
});