OriginHomeListDetail.js 33.8 KB

Edit Raw Blame History Permalink

/**
 * Created by Cassie on 2018/05/14
 * 图文详情
 */
import React, {Component} from 'react';
import {
    ActivityIndicator,
    DeviceEventEmitter,
    findNodeHandle,
    Image, InteractionManager,
    Platform,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import {UIManager} from 'NativeModules';
import {zoomH, zoomW} from '../../utils/getSize';
import CommentInput from './CommentInput';
import CommentMore from './CommentMore';
import CommentReward from './CommentReward';
import DetailTab from './DetailTab';
import {isIphoneX, NoDoublePress, getHomeColor,xnToast} from '../../utils/utils';
import AppService from "../../service/AppService";
// import {headerHeight, line, XOffset} from "../../widget/ForumHeader";

const defaultIcon = require('../../img/defaultIcon.png');
const vIcon = require('../../img/v.png');
const prise = require('../../img/dz.png');
const prised = require('../../img/prised.png');

const writeIcon = require('../../img/writeIcon.png');
const emj = require('../../img/bq_q.png');
const forwarding = require('../../img/zf.png');
const reward = require('../../img/reward.png');
const close = require('../../img/close.png');
// import {NavigationActions,SafeAreaView} from 'react-navigation'

// import CameraRoll from 'rn-camera-roll';

export default class OriginHomeListDetail extends Component {

    static navigationOptions = ({ navigation, screenProps }) => ({
        headerTitle: !!navigation.state.params.showHeaderInfo ? '' : '',
        headerLeft:(
            <TouchableOpacity activeOpacity={1} style={{flexDirection:'row',height:'100%',width:'100%'}}
                              onPress={() => NoDoublePress.onPress(() => {
                                  DeviceEventEmitter.emit("closeCommentInputIos");})}>
                <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row' }}>
                    <TouchableOpacity activeOpacity={1} style={{ height: '100%', justifyContent: 'center', paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }}
                                      onPress={() => NoDoublePress.onPress(() => {
                                          DeviceEventEmitter.emit("closeCommentInputIos");
                                          navigation.goBack();})}>
                        <Image style={{ width: 18 / zoomW, height: 18 }} source={require('../../img/loadBack.png')} resizeMode="contain"/>
                    </TouchableOpacity>
                    {!!navigation.state.params.showHeaderInfo && <TouchableOpacity activeOpacity={1} style={styles.topInfoWrap}
                                                                                   onPress={() => NoDoublePress.onPress(() => {
                                                                                       DeviceEventEmitter.emit("closeCommentInputIos");
                                                                                       navigation.state.params.goToPersonCenter()})}>
                        <TouchableOpacity style={styles.avatar}
                                          onPress={() => NoDoublePress.onPress(() => {
                                              DeviceEventEmitter.emit("closeCommentInputIos");
                                              navigation.state.params.goToPersonCenter();})}>
                            <Image style={styles.avatar} source={(!!navigation.state.params.headerInfo && !!navigation.state.params.headerInfo.threadUserHeadFileUrl) ? { uri: navigation.state.params.headerInfo.threadUserHeadFileUrl + '?x-oss-process=image/resize,w_100' } : require('../../img/defaultIcon.png')} resizeMode="cover" />
                            {!!navigation.state.params.headerInfo && !!navigation.state.params.headerInfo.user && !!navigation.state.params.headerInfo.user.isAuthented && <Image style={styles.avatarV} source={require('../../img/v.png')} resizeMode="cover" />}
                        </TouchableOpacity>
                        <View style={{ flex: 1, marginLeft: 8 / zoomW }}>
                            <Text style={{ fontSize: 14, color: 'rgba(0,0,0,0.85)' }} numberOfLines={1}>{(!!navigation.state.params.headerInfo && navigation.state.params.headerInfo.threadUserName) ? navigation.state.params.headerInfo.threadUserName : ''}</Text>
                            <Text style={{ fontSize: 12, color: 'rgba(0,0,0,0.45)' }} numberOfLines={1}>{(!!navigation.state.params.headerInfo && !!navigation.state.params.headerInfo.user && !!navigation.state.params.headerInfo.user.beAttentionNum) ? navigation.state.params.headerInfo.user.beAttentionNum : 0}粉丝</Text>
                        </View>
                    </TouchableOpacity>}
                </View>
            </TouchableOpacity>
        ),
        headerRight:(
            <TouchableOpacity activeOpacity={1} style={{flexDirection:'row',height:'100%',width:'100%'}}
                              onPress={() => NoDoublePress.onPress(() => {
                                  DeviceEventEmitter.emit("closeCommentInputIos");})}>
                <View style={{ width: 375 / 2 / zoomW, height: '100%', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center' }}>
                    {!!navigation.state.params.showHeaderInfo && !!navigation.state.params.headerInfo && !!navigation.state.params.headerInfo.user && navigation.state.params.headerInfo.user.id != global.userId &&
                    <TouchableOpacity activeOpacity={0.8} style={navigation.state.params.headerInfo.hasFollowed ? styles.hasFollow : [styles.notFollow,{backgroundColor: global.homeColor}]}
                                      onPress={() => NoDoublePress.onPress(() => {
                                          DeviceEventEmitter.emit("closeCommentInputIos");
                                          navigation.state.params.followClick();})}>
                        <Text style = {{ fontSize: 14, color: navigation.state.params.headerInfo.hasFollowed ? 'rgba(0,0,0,0.45)' : '#fff' }}>{navigation.state.params.headerInfo.hasFollowed ? '已关注' : '关注'}</Text>
                    </TouchableOpacity>
                    }
                    <TouchableOpacity style={{ height: '100%', justifyContent: 'center', paddingLeft: 15 / zoomW, paddingRight: 15 / zoomW }}
                                      onPress={() => NoDoublePress.onPress(() => {
                                          DeviceEventEmitter.emit("closeCommentInputIos");
                                          navigation.state.params._more();})}>
                        <Image style={{ width: 21 / zoomW, height: 4 }} source={require('../../img/more.png')}  resizeMode="contain"/>
                    </TouchableOpacity>
                </View>renderHeader
            </TouchableOpacity>
        ),
    });


    constructor(props){
        super(props);
        this.state = {
            detailInfo: {},
            loading: false,
            showInput: false,//是否显示底部弹出框
            operatorLoading: false,//局部操作框
            toCommentPosition: false,
            attentionID: null,
            isShowCommentInput:false // 是否显示CommentInput输入框组件
        };
    };

    componentWillMount(){
        this.getThreadDetailInfo();
        this.setReadCount();
        AppService.forumActionHistory({forumId:global.forumId,actionTargetId:this.props.navigation.state.params.id,actionType:30,actionTargetType:0,actionTargetThreadId:this.props.navigation.state.params.id}).then((data)=>{});
    }

    componentWillUnmount() {
        if (this.reGetThreadDetailInfo != null) {
            this.reGetThreadDetailInfo.remove();
        }
        if (this.toCommentPosition != null) {
            this.toCommentPosition.remove();
        }
        if (this.closeCommentInputIos != null) {
            this.closeCommentInputIos.remove();
        }
    }

    componentDidMount(){
        let _this = this;
        //设置头部
        this.props.navigation.setParams({
            goToPersonCenter: () => this.goToPersonCenter(),
            followClick: () => this.followClick(),
            _more: () => this.showMoreModal(),
            showHeaderInfo: false
        });

        //重新获取详情信息
        this.reGetThreadDetailInfo = DeviceEventEmitter.addListener('reGetThreadDetailInfo',function(){
            console.log("reGetThreadDetailInfo");
            if(!!_this.props.navigation.state.params.showHeaderInfo) {
                _this.props.navigation.setParams({
                    showHeaderInfo: false
                });
            }
            _this.getThreadDetailInfo();
        });

        this.toCommentPosition = DeviceEventEmitter.addListener('toCommentPosition',function(){
            console.log("toCommentPosition");
            _this.setState({
                toCommentPosition:true,
            })
        });

        // 关闭CommentInput输入框组件的通知
        this.closeCommentInputIos = DeviceEventEmitter.addListener('closeCommentInputIos',function(){
            console.log("closeCommentInputIos");
            _this.setState({
                isShowCommentInput:false,
            })
        });

    };

    // 跳转到个人中心
    goToPersonCenter() {
        if (this.state.detailInfo.threadUserId == global.userId) {
            //自己
            this.props.navigation.navigate('MyPage', { id: this.state.detailInfo.threadUserId });
            return;
        }
        this.props.navigation.navigate('PersonalHomePage', { userId: this.state.detailInfo.threadUserId });
    }

    // 关注、取消关注
    followClick() {
        const _this = this;
        if (global.isConnected){
            this.setState({
                loading: true
            });
            const data = JSON.parse(JSON.stringify(this.state.detailInfo));
            if(data.hasFollowed) {
                let params = {
                    id: this.state.attentionID
                };
                AppService.cancleAttention(params).then((data) => {
                    _this.setState({
                        loading: false
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        xnToast('取消关注');
                        _this.getThreadDetailInfo();
                        DeviceEventEmitter.emit('refreshHomeHistory');
                        DeviceEventEmitter.emit('refreshCollectList');
                        DeviceEventEmitter.emit('refreshAttention');
                        DeviceEventEmitter.emit('refreshHomeList');
                        DeviceEventEmitter.emit("refreshAllList");
                        DeviceEventEmitter.emit('reGetThreadDetailInfo');
                    }
                }).catch((error) => {
                    _this.setState({
                        loading: false
                    }, () => {
                        xnToast(error);
                    });
                })
            } else {
                const params = {
                    forumId: data.forumId,//社区id
                    targetType: 1,//关注对象类型,目前固定1：社区用户
                    targetUserId: data.threadUserId,//被关注者用户ID
                    targetUserName: data.threadUserName,//被关注者用户名称
                    attentionUserId: global.userId,//自己的id
                    attentionUserName: global.userName,//自己的名字
                };
                console.log(params);
                AppService.attention(params).then((data) => {
                    _this.setState({
                        loading: false
                    });
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (!!data.errors === true && !!data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        xnToast('已关注');
                        _this.getThreadDetailInfo();
                        DeviceEventEmitter.emit('refreshHomeHistory');
                        DeviceEventEmitter.emit('refreshCollectList');
                        DeviceEventEmitter.emit('refreshAttention');
                        DeviceEventEmitter.emit('refreshHomeList');
                        DeviceEventEmitter.emit("refreshAllList");
                        DeviceEventEmitter.emit('reGetThreadDetailInfo');
                    }
                }).catch((error) => {
                    _this.setState({
                        loading: false
                    }, () => {
                        xnToast(error);
                    });
                })
            }
        } else {
            xnToast('暂无网络连接，请稍后重试！');
        }
    };


    //转发
    _forwardingClick = ()=>{
        let firstFileUrl = !!this.state.detailInfo.user.headFileUrl?this.state.detailInfo.user.headFileUrl :'';//用户头像
        let content = '';
        let placeHolderContent = '';
        let atList= [];
        if(!!this.state.detailInfo.originThread && this.state.detailInfo.originThread.threadDetail){//多次转发，有原贴内容
            firstFileUrl = this.state.detailInfo.originThread.threadDetail.firstFileUrl ||this.state.detailInfo.originThread.threadUserHeadFileUrl;
            let richContent = this.state.detailInfo.originThread.threadType == '4' ? this.state.detailInfo.originThread.title: this.state.detailInfo.originThread.threadDetail.content;
            content = this.state.detailInfo.originThread.threadUserName +" : "+richContent;
            placeHolderContent = '//@'+this.state.detailInfo.threadUserName+" : "+(this.state.detailInfo.threadDetail.content || '');
            let user = {
                id:this.state.detailInfo.threadUserId,
                name:this.state.detailInfo.threadUserName
            }
            atList.push(user);
            if (!!this.state.detailInfo.atHistoryList && this.state.detailInfo.atHistoryList.length >0 ){
                for(let i=0;i<this.state.detailInfo.atHistoryList.length;i++){
                    atList.push(this.state.detailInfo.atHistoryList[i]);
                }
            }
        }else {//原贴，没有转发过
            firstFileUrl = !!this.state.detailInfo.threadDetail && !!this.state.detailInfo.threadDetail.firstFileUrl ?
                this.state.detailInfo.threadDetail.firstFileUrl || firstFileUrl :firstFileUrl;//封面图，原贴的第一张图，如果没有，传用户头像
            let richContent = this.state.detailInfo.threadType == '4' ? this.state.detailInfo.title : !!this.state.detailInfo.threadDetail?this.state.detailInfo.threadDetail.content:'';
            content  =this.state.detailInfo.threadUserName +" : "+ richContent;
        }


        let data = {
            forumId: this.state.detailInfo.forumId,//社区id
            boardId: this.state.detailInfo.boardId,//版块ID,
            threadId :this.state.detailInfo.id,//帖子id
            firstFileUrl:firstFileUrl,
            atList:atList,//帖子@的人列表
            placeHolderContent:placeHolderContent,//转发的转发，别人转发的内容
            content:content,//帖子内容，需要自己拼接为 username：content 的格式
        }
        this.props.navigation.navigate('Forwarding',{from:'Detail',data:data,title:'123',isVideo:this.props.isVideo})

    };

    //获取帖子详细信息
    getThreadDetailInfo(){
        const _this = this;
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        this.setState({
            loading: true,
        });
        let params = {
            id: this.props.navigation.state.params.id,  //帖子id
            sourceFrom:'APP'
        };
        console.log(params);

        AppService.getDetailById(params).then((data) => {

            if (data.message) {
                this.setState({
                    loading:false,
                });
                xnToast(data.message);
                return;
            }
            if (data.errors.length > 0) {
                if (!!data.hasBeenDeleted){
                    xnToast("帖子信息不存在或已被删除");
                    this.props.navigation.goBack();
                    return
                }
                this.setState({
                    loading:false,
                });
                xnToast(data.errors[0].message);
            } else {
                let attentionID = null;
                let hasFollowed = false;
                let threadExtend = data.threadExtend || {};
                if(!!threadExtend.user && !!threadExtend.user.attention && !!threadExtend.user.attention.isActive) {
                    hasFollowed = true;
                    attentionID = threadExtend.user.attention.id || null;
                }
                threadExtend.hasFollowed = hasFollowed;
                _this.props.navigation.setParams({
                    headerInfo: threadExtend
                });
                _this.setState({
                    detailInfo: threadExtend,
                    attentionID: attentionID,
                    loading: false,
                });
            }
        }).catch((error) => {
            this.setState({
                loading: false,
            });
            xnToast(error);
        })

    }

    //设置阅读数
     setReadCount(){
         if (!global.isConnected){
             return;
         }

         let params = {
             id:this.props.navigation.state.params.id,//帖子id
         };

         AppService.ThreadReadRequest(params).then((data) => {

             if (data.message) {
                 xnToast(data.message);
                 return;
             }
             if (data.errors.length > 0) {
                 xnToast(data.errors[0].message);
             } else {
                 // 已读成功统一发送已读通知
                 DeviceEventEmitter.emit('readNoti',this.props.navigation.state.params.id);

             }
         }).catch((error) => {
             xnToast(error)
         })
     }
    //点赞
    _starClick (isLike,type){
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            return;
        }
        if(this.state.operatorLoading){
            //正在操作
            return;
        }
        let data = this.state.detailInfo;
        let _this = this;
        _this.setState({
            operatorLoading:true,
        });
        //点赞
        if (isLike){

            let params = {
                forumId:data.forumId,//社区id
                boardId:data.boardId,//版块ID
                targetType: type,//点赞类型: 点赞对象的类型 0：帖子点赞 1：评论点 2：回复点赞 3:转发点赞
                targetId:data.id,//点赞对象ID
                likeUserId:global.userId,//点赞用户ID
                likeUserName: global.userName,//点赞用户名字
            };
            console.log(params);

            AppService.like(params).then((data) => {
                console.log(data);
                if (data.message) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.errors[0].message);
                } else {

                    xnToast('点赞成功');
                    _this.setState({
                        operatorLoading:false,
                    });
                    _this.getThreadDetailInfo();
                    //通知点赞列表刷新
                    DeviceEventEmitter.emit('refreshPriseList');
                    DeviceEventEmitter.emit('refreshHomeList');

                }
            }).catch((error) => {
                _this.setState({
                    operatorLoading:false,
                });
                xnToast(error)
            })
        }else {//取消点赞
            let params = {
                id: data.threadLike.id//点赞id
            };
            console.log(params);

            AppService.cancelLike(params).then((data) => {
                console.log(data);
                if (data.message) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast(data.errors[0].message);
                } else {
                    _this.setState({
                        operatorLoading:false,
                    });
                    xnToast('已取消点赞');

                    _this.getThreadDetailInfo();
                    //通知点赞列表刷新
                    DeviceEventEmitter.emit('refreshPriseList');
                    DeviceEventEmitter.emit('refreshHomeList');

                }
            }).catch((error) => {
                _this.setState({
                    operatorLoading:false,
                });
                xnToast(error)
            })
        }


    };

    //更多
    showMoreModal(){
        this.refs['CommentMore'].openModal();
    }
    //赞赏
    showRewardModal(){
        this.refs['CommentReward'].openRewardModal();
    }

    //评论
    /**
     *  @param inputStr:输入法人内容
     *
     */
    toComment=(data)=> {
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            this.setState({
                operatorLoading:false,
            });
            return;
        }
        this.setState({
            operatorLoading:true,
        });

        let detailInfo = this.state.detailInfo;

        let params = {
            forumId:detailInfo.forumId,//社区id
            boardId:detailInfo.boardId,//版块ID
            threadId:detailInfo.id,//帖子Id
            floor:1,//楼层，评论的楼层为1，回复的楼层为父级楼层+1
            userId:global.userId,//评论/回复者ID
            userName:global.userName,//评论/回复者的名字
            content: data.content,//评论/回复内容
            richContent:data.richContent,//评论/回复富文本内容
            attachmentList:data.attachmentList,//附件集合
            topicHistoryList: data.tList,//引用的话题列表
            userList: data.aList,//引用的话题列表
            forward: data.isForward,//是否同时转发
            forwardRichContent:data.forwardRichContent,//同时转发富文本内容
            forwardContent:data.forwardContent,//同时转发内容
        };
        console.log(params);

        AppService.creatCommentOrReply(params).then((data) => {

            if (data.message) {
                xnToast(data.message);
                this.setState({
                    operatorLoading:false,
                });
                return;
            }
            if (data.errors.length > 0) {
                this.setState({
                    operatorLoading:false,
                });
                xnToast(data.errors[0].message);
            } else {
                xnToast("已评论");
                this.setState({
                    operatorLoading:false,
                });
                if(this.refs.CommentInput != undefined){
                    InteractionManager.runAfterInteractions(() => {
                        this.refs.CommentInput.reset();
                    });
                }
                //通知评论列表刷新
                DeviceEventEmitter.emit('refreshReplyList');
                DeviceEventEmitter.emit('refreshHomeList');

            }
        }).catch((error) => {
            xnToast(error);
            this.setState({
                operatorLoading:false,
            });
        })


    };


    //显示评论
    commentClick (){
        if (Platform.OS == 'ios'){
            this.setState({
                isShowCommentInput:true
            });
        }
        InteractionManager.runAfterInteractions(() => {
            this.refs.CommentInput.showInputLayout();
        });
    };

    renderCommentInput(){
        return (
            <View>
                <View style = {styles.inputBg}  >
                    <TouchableOpacity style = {styles.greyRadiusBg}  onPress = {()=>{this.commentClick()}}>
                        <Text style = {{fontSize:14,color:'#000000',marginLeft:14/zoomW}}>写评论...</Text>
                        <Image style={{width:20/zoomW,height:20/zoomW,marginRight:8/zoomW}} source={emj} resizeMode="cover"  ></Image>
                    </TouchableOpacity>
                    {/*点赞*/}
                    <TouchableOpacity onPress = {() =>{NoDoublePress.onPress(()=>{
                        this._starClick(!!this.state.detailInfo.threadLike
                        && !!this.state.detailInfo.threadLike.isActive?false:true,0)
                    })}} >
                        <Image style={styles.img} source={!!this.state.detailInfo.threadLike &&
                        !!this.state.detailInfo.threadLike.isActive? prised:prise} resizeMode="cover"  ></Image>
                    </TouchableOpacity>
                    {/*转发*/}
                    <TouchableOpacity  onPress = {()=>{NoDoublePress.onPress(()=>{
                        this._forwardingClick()
                    })}}>
                        <Image style={styles.img} source={forwarding} resizeMode="cover"  ></Image>
                    </TouchableOpacity>
                    {/*打赏
                    <TouchableOpacity   onPress = {()=> {this.showRewardModal()}}>
                        <Image style={styles.img} source={reward} resizeMode="cover"  ></Image>
                    </TouchableOpacity>*/}
                </View>

                {/*<CommentReward
                    ref = "CommentReward"
                  callback = {(money) =>{alert("打赏"+money)}}/>*/}
            </View>
        );
    }

    //是否显示位置信息
    showLocation(){
        if( !!this.state.detailInfo.city && this.state.detailInfo.threadType == 0){
            return true;
        }
        return false;
    }
    //构造详情内容ItemWebView需要的字段
    getItemData(){
        let detailInfo = this.state.detailInfo;
        let data = {
            isForward:!!detailInfo.isForward?true:false,//是否是转发
            forwardContent:detailInfo.threadDetail.richContent,//转发文字
            threadDetailContent:!!detailInfo.isForward?
                detailInfo.originThread.threadDetail.richContent:detailInfo.threadDetail.richContent,//原贴内容
        }
        return data;
    }

    // 滚动
    scroll = (Y) =>  {
        if(Y > (!!this.state.detailInfo.isBoardTop ? 61 : 57)) {
            if(!this.props.navigation.state.params.showHeaderInfo) {
                this.props.navigation.setParams({
                    showHeaderInfo: true
                });
            }
        } else {
            if(!!this.props.navigation.state.params.showHeaderInfo) {
                this.props.navigation.setParams({
                    showHeaderInfo: false
                });
            }
        }
    }

    render(){
        return(
            <View style={styles.background} >
                {!this.state.loading && <View style= {{flex:1,width:'100%'}}>
                    {/*/!*转发、评论、赞赏、赞tab栏*!/*/}
                    <DetailTab ref = 'DetailTab'
                               nav = {this.props.navigation}
                               detailInfo = {this.state.detailInfo}
                               scrollEvent={this.scroll}
                    />
                </View>}
                {/*/!*评论输入框*!/*/}
                {!this.state.loading && !this.state.isShowCommentInput && this.renderCommentInput()}

                {/*更多操作*/}
                <CommentMore
                    ref='CommentMore'
                    detailInfo = {this.state.detailInfo}
                    collectClick = {()=>{}}
                    deleteClick = {()=>{this.props.navigation.goBack();}}
                    forum={global.forum}
                />

                {this.state.loading && (
                    <View style={styles.loadingBg}>
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size="large" color="#fff" />
                            <Text
                                style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
                            >
                                加载中...
                            </Text>
                        </View>
                    </View>
                )}
                {/*局部loading*/}
                {this.state.operatorLoading && (
                    <View style={styles.loadingBg}>
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size="large" color="#fff" />
                            <Text
                                style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
                            >
                                加载中...
                            </Text>
                        </View>
                    </View>
                )}

                {Platform.OS == 'ios' && !this.state.loading && this.state.isShowCommentInput && <CommentInput  ref = "CommentInput"
                                                                                                                boardId = {this.state.detailInfo.boardId}
                                                                                                                callback = { (data)=>{this.toComment(data)}}
                                                                                                                uploadCallback = {(isLoading) =>{this.setState({operatorLoading:isLoading})}}
                                                                                                                nav = {this.props.navigation}
                                                                                                                hasNavHeight = {true}
                />}

                {Platform.OS == 'android' &&<CommentInput  ref = "CommentInput"
                                                           boardId = {this.state.detailInfo.boardId}
                                                           callback = { (data)=>{this.toComment(data)}}
                                                           uploadCallback = {(isLoading) =>{this.setState({operatorLoading:isLoading})}}
                                                           nav = {this.props.navigation}
                                                           hasNavHeight = {true}
                />}

            </View>

        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex: 1,
        backgroundColor: '#fff',
        display: 'flex',
        alignItems: 'center',
        justifyContent:'flex-end'

    },

    itemBackground:{
        width:'100%',
        flex:1,
        padding: 15/zoomH,
        flexDirection :'row',
    },

    commonBg:{
        marginLeft:10/zoomW,
        marginRight:10/zoomW,
    },

    reading:{
        fontSize:12,color:'rgba(0,0,0,0.45)',
        },

    commonAvatar:{
        width:36/zoomH,height:36/zoomH,borderRadius:18/zoomH
    },
    commonAvatarV:{
        width:10/zoomH,height:10/zoomH,position:'absolute',right:1/zoomW,bottom:1/zoomW
    },
    userNameBlue:{
        fontSize: 14,color:'#576B95',
    },
    userIdentity:{
        fontSize: 12,color:'#c3c3c3'
    },
    content:{
        fontSize: 16,color:'rgba(0,0,0,0.85)',marginTop:10/zoomH
    },
    time:{
        fontSize: 12,color:'rgba(0,0,0,0.45)',marginTop:8/zoomH
    },
    reply:{
        fontSize: 10,color:'black',marginTop:5/zoomH,backgroundColor:'#eeeeee',borderRadius:10,
        paddingLeft:10,paddingRight:10, paddingTop:2,paddingBottom:2
    },
    inputBg:{
        width:'100%',height:44/zoomH, flexDirection:'row',alignItems:'center',backgroundColor:'#ffffff',
        justifyContent:'space-between',paddingLeft:20/zoomW,paddingRight:20/zoomW,marginBottom:isIphoneX()?34:0, borderColor: '#eeeeee',
        borderWidth: StyleSheet.hairlineWidth,
    },
    greyRadiusBg:{
        flex:1,flexDirection:'row',height:32/zoomH,justifyContent:'space-between',alignItems:'center',borderRadius:19/zoomW,backgroundColor:'#eeeeee'
    },

    img:{
        width:20/zoomW,height:20/zoomW,marginLeft:25/zoomW
    },
    loadingBg: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
    },
    topInfoWrap: {
        flex: 1,
        height: '100%',
        flexDirection: 'row',
        alignItems: 'center',
    },
    avatar:{
        width: 32 / zoomW,
        height: 32 / zoomW,
        borderRadius: 16 / zoomW
    },
    avatarV:{
        width: 10 / zoomW,
        height: 10 / zoomW,
        position: 'absolute',
        right: 4 / zoomW,
        bottom: 2 / zoomW
    },
    hasFollow: {
        width: 60 / zoomW,
        height: 30,
        backgroundColor: '#E9E9E9',
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },
    notFollow: {
        width: 60 / zoomW,
        height: 30,

        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center'
    },

});