customer / shanghai-railway-rnapp

import React, {Component} from 'react';
import {
    ActivityIndicator,
    DeviceEventEmitter,
    Image,
    InteractionManager,
    Keyboard,
    Platform,
    ScrollView,
    StyleSheet,
    Text,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';
import {sortBy} from '../../utils/utils';
import {height, zoomH, zoomW} from '../../utils/getSize';
import EmojiSelector, {Categories} from 'react-native-emoji-selector';
import {getFooterBottom, getStatusBarHeight, isIphoneX, xnToast, getHomeColor, getHeaderPadding, NoDoublePress} from "../../utils/utils";
import AppService from "../../service/AppService";
import UploadVideoThirdStep from "../uploadVideo/thirdStep";
// import {NoDoublePress,xnToast} from '../../utils/utils';

const  keyboard = require('../../img/jp.png');
const  at = require('../../img/at.png');
const  topic = require('../../img/ht.png');
const  emoji = require('../../img/bq_q.png');


let  data ;//上个页面传过来的帖子的详细信息
let  isVideo;


/**
 * Created by Cassie on 2018/05/14
 * 转发
 * 调用者需要传入的参数数据源示例（字段必须要保持一致）：{
 *                                forumId: xxx,//社区id
 *                                boardId:xxx',//版块ID,
 *                                threadId:'xxxxx',//帖子id
 *                                firstFileUrl：'xxx',//封面图，原贴的第一张图，如果没有，传用户头像
 *                                content：'xxx',//帖子内容，需要自己拼接为 username：content 的格式
 *
 *                          }
 */
let layoutHeight = 0;

export default class Forwarding extends Component {

    static navigationOptions = ({ navigation, screenProps }) => ({
        header: null
    });

    constructor(props){
        super(props);
        this.state = {
            content:this.props.navigation.state.params.data.placeHolderContent || '',
            preContent: '',
            keyboardHeight:0,
            emojiHeight:0,
            bottomHeight:0,//底部操作栏距离底部的距离
            isShowKeyboard:true,//键盘是否弹起
            attachmentList:[],//图片附件集合
            showEmoji:false,//是否显示表情包
            atList:[],//@的人集合
            topicList:[],//话题集合
            isInput:false,//是否是直接输入@或者#号
            loading:false,//提交时加载狂
            height:100,//输入框的高度
            top:height - getStatusBarHeight(),
            isFirstLoad:true,// 是否第一次加载
            isBackspace:false,// 是否按下了删除键
            inputStart:0,// 保持的光标位置
        };
    };

    componentWillMount(){
        data  = this.props.navigation.state.params.data;
        isVideo =  this.props.navigation.state.params.isVideo || false;
        // if (!!this.props.navigation.state.params.data.atList &&this.props.navigation.state.params.data.atList.length>0 ){
        //     for(let i = 0;i<this.props.navigation.state.params.data.atList.length;i++){
        //         this.state.atList.push(this.props.navigation.state.params.data.atList[i]);
        //     }
        //
        // }
    };
    componentDidMount(){
        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
        this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
        if(this.refs.text != undefined){
            InteractionManager.runAfterInteractions(() => {
                //不能使用textinput的autofacus属性，用这个属性从其他页面跳过来的时候键盘会先弹起再消失
                if (this.refs.text != undefined){
                    this.refs.text.focus();
                }
                this._initialSetArrow();
            });
        }
    };
    onLayout = (event)=>{
        layoutHeight = event.nativeEvent.layout.height;
    }
    componentWillUnmount(){
        this.keyboardDidShowListener.remove();
        this.keyboardDidHideListener.remove();
    };

    _keyboardDidShow (e) {
        let _this = this;
        this.setState({
            top: layoutHeight- e.endCoordinates.height - (48 / zoomH),
            keyboardHeight:e.endCoordinates.height,
            emojiHeight :e.endCoordinates.height,
            isShowKeyboard:true,
            showEmoji:false
        },function () {
            console.log('_keyboardDidShow--keyboardHeight' +_this.state.keyboardHeight );
        })
    }

    _keyboardDidHide (e) {
        let _this = this;
        this.refs.text.blur();
        this.setState({
            isShowKeyboard:false,
            keyboardHeight: this.state.showEmoji?this.state.keyboardHeight:0,
            top:this.state.showEmoji?this.state.top:layoutHeight-(isIphoneX()?48/zoomH+getFooterBottom():48/zoomH),
        },function () {
            console.log('_keyboardDidHide--keyboardHeight' +_this.state.keyboardHeight );
        })

    };

    /*显示表情包*/
    showEmoji(){
        let showEmoji = this.state.showEmoji;
        if(Platform.OS == 'android'){
            showEmoji?this.refs.text.focus():this.refs.text.blur();
            this.setState({
                showEmoji:showEmoji?false:true,
                keyboardHeight:showEmoji?0:this.state.emojiHeight,
            });
        }else{
            this.setState({
                showEmoji:showEmoji?false:true,
            },function(){
                showEmoji?this.refs.text.focus():this.refs.text.blur();
            })
        }
    };

    //点击关闭键盘或者弹出键盘
    dissmissKeyboard(){
        console.log('----dissmissKeyboard');
        if (this.state.showEmoji){//正显示表情
            this.setState({
                showEmoji:false,
                keyboardHeight:0,
                top:layoutHeight-(isIphoneX()?48/zoomH+getFooterBottom():48/zoomH),

            })
            return;
        }
        if (this.state.isShowKeyboard){
            this.setState({
                keyboardHeight:0,
            },function () {
                InteractionManager.runAfterInteractions(() => {
                    Keyboard.dismiss();
                    this.refs.text.blur();
                })
            })
        }else {
            this.refs.text.focus();
        }
    }

    //点击事件
    //选择@的人
    updateAtList  =(item) =>{
        if(item == ''){
            InteractionManager.runAfterInteractions(() => {
                this.refs.text.focus()
            });
            return;
        }
        let atItem = {
            id:item.userId,
            name:item.userName,
        };
        let start = this.state.inputStart;
        let nameString = '';
        let leftString = '';
        let rightString = '';
        let finalString = '';
        // 后面加一个半角空格来区分
        if (this.state.isInput){
            nameString = atItem.name + ' ';
        }else{
            nameString = '@'+atItem.name + ' ';
        }
        if(Platform.OS == 'ios'){
            leftString = this.state.content.substring(0,start);
            if(start < this.state.content.length-1){
                rightString = this.state.content.substring(start,this.state.content.length);
            }
        }else{
            leftString = this.state.content.substring(0,start+1);
            if(start+1 < this.state.content.length-1){
                rightString = this.state.content.substring(start+1,this.state.content.length);
            }
        }

        finalString = leftString+nameString+rightString;
        let _this = this;
        this.setState({
            showEmoji:false,
            content:finalString,
        },function () {
            let isInput = _this.state.isInput;
            let baseSectionStart = Platform.OS == 'ios'? (start+nameString.length):(isInput?start+nameString.length+1:start+nameString.length);

            InteractionManager.runAfterInteractions(() => {
                this.refs.text.focus();
                setTimeout(()=>{
                    this.refs.text.setNativeProps({
                        selection : { start : baseSectionStart, end :baseSectionStart}
                    })
                },10);
            });
        });
        // this.setState({
        //     showEmoji:false,
        //     content:this.state.isInput?this.state.content.concat(atItem.name):this.state.content.concat('@'+atItem.name),
        // },function () {
        //     InteractionManager.runAfterInteractions(() => {
        //         this.refs.text.focus()
        //     });
        // });
        //去重
        if (this.state.atList.length > 0){
            let hasBefore = false;
            for(let i = 0;i< this.state.atList.length;i++){
                if (this.state.atList[i].id == atItem.id){
                    hasBefore = true;
                    break;
                }
            }

            if (!hasBefore){
                this.state.atList.push(atItem)
            }
        }else {
            this.state.atList.push(atItem)
        }
    };
    //选择话题
    updateTopicList  =(item) =>{
        if(!!!item || item == '' || item.id ==''){
            InteractionManager.runAfterInteractions(() => {
                this.refs.text.focus()
            });
            return;
        }
        let topicItem = {
            forumId:data.forumId,
            boardId:data.boardId,
            topicId:item.id,
            topicName:item.name,
            topicUserId:global.userId,
            topicUserName:global.userName,
        };
        let start = this.state.inputStart;
        let nameString = '';
        let leftString = '';
        let rightString = '';
        let finalString = '';
        if (this.state.isInput){
            nameString = topicItem.topicName+'#';
        }else{
            nameString = '#'+topicItem.topicName+'#';
        }
        if(Platform.OS == 'ios'){
            leftString = this.state.content.substring(0,start);
            if(start < this.state.content.length-1){
                rightString = this.state.content.substring(start,this.state.content.length);
            }
        }else{
            leftString = this.state.content.substring(0,start+1);
            if(start+1 < this.state.content.length-1){
                rightString = this.state.content.substring(start+1,this.state.content.length);
            }
        }

        finalString = leftString+nameString+rightString;
        let _this = this;
        this.setState({
            showEmoji:false,
            content:finalString,
        },function () {
            let isInput = _this.state.isInput;
            let baseSectionStart = Platform.OS == 'ios'? (start+nameString.length):(isInput?start+nameString.length+1:start+nameString.length);
            InteractionManager.runAfterInteractions(() => {
                this.refs.text.focus();
                setTimeout(()=>{
                    this.refs.text.setNativeProps({
                        selection : { start : baseSectionStart, end :baseSectionStart}
                    })
                },10);
            });
        });

        // this.setState({
        //     showEmoji:false,
        //     content:this.state.isInput?this.state.content.concat(topicItem.topicName+'#'):this.state.content.concat('#'+topicItem.topicName+'#'),
        // },function () {
        //     InteractionManager.runAfterInteractions(() => {
        //         this.refs.text.focus()
        //     });
        // });
        //去重
        if (this.state.topicList.length > 0){
            let hasBefore = false;
            for(let i = 0;i< this.state.topicList.length;i++){
                if (this.state.topicList[i].topicName == topicItem.topicName){
                    hasBefore = true;
                    break;
                }
            }

            if (!hasBefore){
                this.state.topicList.push(topicItem)
            }
        }else {
            this.state.topicList.push(topicItem)
        }

    };

    //跳到@的人页面
    toChooseAtPerson(isInput){
        let selection = this.refs.text._lastNativeSelection || null;
        let start = !!selection?selection.end:0;
        if(this.state.isFirstLoad){
            start = isInput? (Platform.OS == 'ios'?1:0):0;
        }
        this.setState({
            preContent: this.state.content,
            isInput:isInput,
            inputStart:start,
            isFirstLoad:false,
        });
        this.props.navigation.navigate('AtPerson', {
            callBack: this.updateAtList
        });
    };
    //跳到#页面
    toChooseTopic(isInput){
        let selection = this.refs.text._lastNativeSelection || null;
        let start = !!selection?selection.end:0;
        if(this.state.isFirstLoad){
            start = isInput? (Platform.OS == 'ios'?1:0):0;
        }
        this.setState({
            preContent: this.state.content,
            isInput:isInput,
            inputStart:start,
            isFirstLoad:false,
        });
        this.props.navigation.navigate('ChooseTopic', {
            callBack: this.updateTopicList
        });
    }

    /*判断是否@或者话题#*/
    atOrTopic() {
        this.setState({
            isFirstLoad:false,
        });
        let selection = this.refs.text._lastNativeSelection || null;

        if(this.state.isBackspace == false){
            // console.log(selection.start);
            // console.log(selection.end);
            let lastChar;
            if (this.state.preContent.length < this.state.content.length) {
                lastChar = this.state.content.substring(this.state.content.length - 1);
            }else{
                this.setState({
                    preContent: this.state.content
                })
            }
            // 取光标前一个字符
            if(!!selection){
                if(selection.start == selection.end ){
                    if(!!this.refs.text){
                        // 这里ios与android机制不一样
                        if(Platform.OS == 'ios'){
                            lastChar = this.state.content.substring(selection.start-1,selection.start);
                        }else{
                            if (selection.end == this.state.content.length -1){
                                lastChar = this.state.content.substring(this.state.content.length -1,this.state.content.length);
                            }else {
                                lastChar = this.state.content.substring(selection.start,selection.start+1);
                            }
                        }
                    }
                }
                this.setState({
                    inputStart: selection.end,
                })
            }
            if (lastChar == '@') {//@
                this.toChooseAtPerson(true);
            }else  if (lastChar == '#'){//话题
                this.toChooseTopic(true);
            }
            this.setState({
                preContent: this.state.content
            })
            // console.log(lastChar);
        }

        // setTimeout(() => {
        //     // 获得光标位置
        //     let selection = this.textInput._lastNativeSelection || null;
        //     // 如果是初始的默认状态,需要屏蔽执行
        //     if(!selection && selection.start == 0 && selection.end == 0 && this.state.content.length > 0){
        //         return;
        //     }else{
        //         if (this.state.preContent.length < this.state.content.length) {
        //             if (this.state.content.substring(this.state.content.length - 1) == '@') {//@
        //                 this.toChooseAtPerson(true);
        //             }else  if (this.state.content.substring(this.state.content.length - 1) == '#'){//话题
        //                 this.toChooseTopic(true);
        //             }
        //             this.setState({
        //                 preContent: this.state.content
        //             })
        //         } else {
        //             this.setState({
        //                 preContent: this.state.content
        //             })
        //         }
        //     }
        // }, 10)
    };

    //发布
    publish(){
        let  _this = this;
        Keyboard.dismiss();

        let content = this.state.content;//输入框的文字
        content = content.replace(new RegExp('<',"gm"),'&lt;');
        if(!content.replace(/(^\s*)/g,"") ||content.replace(/(^\s*)/g,"").length == 0){
            content = "转发了";
        }
        if (content.length > 1000){
            xnToast("字数不能超多1000字");
            return;
        };
        this.setState({
            loading:true,
        });

        //@筛选
        let atResultList = [];
        //拼接标签
        let rich_content = '<div>' + content + "</div>";
        // 暂时升序排列，避免标签替换出错导致页面显示/>结束标签
        let sortedAtList = this.state.atList.sort(sortBy('name',1));
        if (sortedAtList.length != 0) {
            let atCount = 0;
            for (let i = 0; i < sortedAtList.length; i++) {
                if (content.indexOf(sortedAtList[i].name + ' ') != -1) {
                    atResultList.push(sortedAtList[i]);
                    let beforeStr = '@'+sortedAtList[i].name + ' ';//需要替换的文字(含用于区分的半角空格)
                    let afterStr  =  '↵funew↵<a class="@" href= "id = '+sortedAtList[i].id
                        + '" title = "@'+ sortedAtList[i].name + '"'+'/>'+ '↵funew↵' ;//替换后的文字
                    rich_content =   rich_content.replace(new RegExp(beforeStr,"gm"),afterStr);
                }
                atCount = atCount + content.split('@'+sortedAtList[i].name).length -1;
            }
            if (atCount >30){
                xnToast('@人的个数最多30个');
                this.setState({
                    loading:false,
                });
                return;
            }
        }
        //#筛选
        let topicResultList = [];
        // 暂时升序排列，避免标签替换出错导致页面显示/>结束标签
        let sortedTopicList = this.state.topicList.sort(sortBy('topicName',1));
        if (sortedTopicList.length != 0) {
            let topicCount = 0;
            for (let i = 0; i < sortedTopicList.length; i++) {
                if (content.indexOf(sortedTopicList[i].topicName) != -1) {
                    topicResultList.push(sortedTopicList[i]);
                    let beforeStr = '#'+sortedTopicList[i].topicName+'#';//需要替换的文字
                    let afterStr  =  '↵funew↵<a class="#" href= "id = '+sortedTopicList[i].topicId
                        + '" title = "#'+ sortedTopicList[i].topicName + '#"'+'/>' + '↵funew↵';//替换后的文字
                    rich_content =   rich_content.replace(new RegExp(beforeStr,"gm"),afterStr);
                }
                topicCount = topicCount + content.split('#'+sortedTopicList[i].topicName+'#').length -1;
            }
            if (topicCount >30){
                xnToast('话题的个数最多30个');
                this.setState({
                    loading:false,
                });
                return;
            }
        }

        //接口转发
        if (!global.isConnected){
            xnToast('暂无网络连接，请稍后重试！');
            this.setState({
                loading:false,
            });
            return;
        }
        let params = {
            forumId:data.forumId,//社区id
            boardId:data.boardId,//版块ID
            threadId:data.threadId,//帖子Id
            forwardUserId:global.userId,//转发者id
            forwardUserName:global.userName,//转发者名字
            content:content,
            sourceFrom:'APP',
            richContent:rich_content,
            forwardDefaultContent:content,//默认转发自定义内容
            topicHistoryList: topicResultList,//引用的话题列表
            userList: atResultList//引用的话题列表
        };
        console.log(params);

        AppService.forward(params).then((data) => {
            console.log(data);
            this.setState({
                loading:false,
            });
            if (data.message) {
                xnToast(data.message);

                return;
            }
            if (data.errors.length > 0) {
                xnToast(data.errors[0].message);
            } else {
                xnToast('转发成功');
                const {addForwardingBack,id}=this.props.navigation.state.params;
                if(!!addForwardingBack){
                    addForwardingBack(id)
                };
                //刷新关注板块
                DeviceEventEmitter.emit('refreshList');
                DeviceEventEmitter.emit('refreshReplyList');
                DeviceEventEmitter.emit('refreshForward');
                DeviceEventEmitter.emit('refreshThreadStatic');

                _this.props.navigation.goBack();
            }

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

    }

    //获取转发的帖子的第一张图片地址，没有图片显示用户头像，头像也没有，默认图片
    getImageUrl(){

        if (!!!data){
            return '';
        }
        //存在第一张图片
        if (!!data.firstFileUrl && data.firstFileUrl !=''){
            return data.firstFileUrl +'?x-oss-process=image/resize,w_500';
        }
        return '';

    }

    //获取显示帖子内容
    getContent(){
        let content = '';
        if (!!!data){
            return '';
        }
        if(isVideo) {
            content = !!data.content ? data.content : '发布了小视频';
        } else {
            content = !!data.content ? data.content :  ' ';
        }
        return content;
    }
    // TextInput 高度自适应
    onContentSizeChange = (event) => {
        //android 暂时不做处理
        if (Platform.OS == 'android'){
            return;
        }
        let h = event.nativeEvent.contentSize.height;
        if (h < 100/zoomH){
            h = 100/zoomH;
        }
        if  (h > 220/zoomH){
            h = 220/zoomH;
        }
        if (h != this.state.height){
            this.setState({
                height: h
            });
        }
    }

    _onKeyPress(key){
        // console.log(key.nativeEvent['key']);
        this.setState({
            isBackspace:key.nativeEvent['key'] == 'Backspace'?true:false,
        });
    }

    _initialSetArrow(){
        InteractionManager.runAfterInteractions(() => {
            if(this.refs.text != undefined &&
                this.state.isFirstLoad == true &&
                this.state.content.length > 0){
                setTimeout(()=>{
                    this.refs.text.setNativeProps({
                        selection : { start : 0, end :0}
                    })
                },10);
                this.setState({
                    inputStart:0,
                });
            }
        });
    }

    render(){
        return(
            <View style={styles.background} ref = 'layout' onLayout = {(event)=>this.onLayout(event)}>
                <View style={{ width: '100%', height: getHeaderPadding() }} />
                <View style={styles.headerWrap}>
                    <TouchableOpacity
                        style={[styles.headerRightPublishTouchStyle, { left: 0 }]}
                        onPress={() => NoDoublePress.onPress(() => this.props.navigation.goBack())}
                    >
                        <Text style={styles.headerLeftCancelTextStyle}>取消</Text>
                    </TouchableOpacity>
                    <Text style={{ color: "#000", fontSize: 18, fontWeight: "bold" }}>转发</Text>

                    <TouchableOpacity
                        style={[styles.headerRightPublishTouchStyle, { right: 0 }]}
                        onPress={() => NoDoublePress.onPress(() => this.publish())}
                    >
                        <Text style={[styles.headerRightPublishedTextStyle,{color: global.homeColor}]}>发布</Text>
                    </TouchableOpacity>

                </View>

                <ScrollView style={{ flex: 1 }} keyboardShouldPersistTaps='always'>
                    <View style={{paddingLeft:15/zoomW,paddingRight:15/zoomW,paddingTop:10/zoomH,paddingBottom:10/zoomH}}>
                        {/*输入区*/}
                        <View style={[styles.content]}>

                            {Platform.OS == 'android' && <TextInput ref="text" blurOnSubmit = {false}
                                                                    underlineColorAndroid="transparent"
                                                                    value={this.state.content}
                                                                    multiline={true}
                                                                    scrollEnabled = {true}
                                                                    style={[styles.contentText,{height:height*0.22}]}
                                                                    placeholder='说说你的看法'
                                                                    onChangeText={(value) => {this.setState({content:value}, function () {
                                                                        this.atOrTopic();
                                                                    })}}
                                                                    onKeyPress={(key) => {this._onKeyPress(key)}}
                                                                    maxLength={1000}  />}
                            {Platform.OS == 'ios' && <TextInput ref="text" blurOnSubmit = {false}
                                                                onContentSizeChange={(event) => this.onContentSizeChange(event)}
                                                                underlineColorAndroid="transparent"
                                                                value={this.state.content}
                                                                multiline={true}
                                                                scrollEnabled = {true}
                                                                style={[styles.contentText,{height:this.state.height}]}
                                                                placeholder='说说你的看法'
                                                                onChangeText={(value) => {this.setState({content:value}, function () {
                                                                    this.atOrTopic();
                                                                })}}
                                                                onKeyPress={(key) => {this._onKeyPress(key)}}
                                                                maxLength={1000}  />}
                        </View>
                        {/*转发简介*/}
                        <View style = {{height:68/zoomH,marginTop:10/zoomH,backgroundColor:'#F4F5F6',flexDirection:'row',alignItems:'center'}  }>
                            <Image style = {{width:68/zoomH,height: 68/zoomH}}
                                   source={this.getImageUrl() == ''? require('../../img/defaultIcon.png'):{uri:this.getImageUrl()}}/>
                            <Text style = {{fontSize:16,flex:1,color:'#000000',padding:10/zoomW}}   numberOfLines={2}>
                                <Text>{this.getContent()}</Text>
                            </Text>
                        </View>

                    </View>

                </ScrollView>
                {/*底部操作栏*/}
                {/*<View style = {{width:'100%',height:48/zoomH,backgroundColor:'#F4F5F6',alignItems:'center',position:'absolute',*/}
                {/*bottom:Platform.OS == 'ios'?this.state.keyboardHeight:0,flexDirection:'row',justifyContent:'space-between'}}>*/}
                <View style = {{width:'100%',height:48/zoomH,backgroundColor:'#F4F5F6',alignItems:'center',position:'absolute',
                    top:this.state.top,flexDirection:'row',justifyContent:'space-between'}}>
                    <TouchableOpacity onPress = {()=>{this.dissmissKeyboard()}}>
                        <Image style={styles.img} source={keyboard} resizeMode='contain'></Image>
                    </TouchableOpacity>
                    <View style = {{flexDirection:'row',justifyContent:'space-around'}}>
                        <TouchableOpacity onPress = {()=>{
                            NoDoublePress.onPress(() => {
                                this.toChooseAtPerson(false);
                            });
                        }} >
                            <Image style={styles.img} source={at} resizeMode='contain'></Image>
                        </TouchableOpacity>
                        <TouchableOpacity onPress = {()=>{
                            NoDoublePress.onPress(() => {
                                this.toChooseTopic(false);
                            });
                        }} >
                            <Image style={styles.img} source={topic} resizeMode='contain'></Image>
                        </TouchableOpacity>
                        <TouchableOpacity onPress = {()=>{
                            NoDoublePress.onPress(() => {
                                this.showEmoji();
                            });
                        }}>
                            <Image style={styles.img} source={emoji} resizeMode='contain'></Image>
                        </TouchableOpacity>
                    </View>

                </View>
                {/*表情包*/}
                {this.state.showEmoji && <View style={{width:'100%',height:this.state.emojiHeight,backgroundColor:'#ffffff'}}>
                    <EmojiSelector
                        onEmojiSelected={(emoji) => this.setState({content:this.state.content + emoji})}
                        showSearchBar={false}
                        showTabs={true}
                        showSectionTitles={false}
                        category={Categories.all}
                        columns={9}
                    />
                </View>}
                {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>}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background:{
        flex:1,
        backgroundColor:'#FFFFFF',
        display:'flex',
    },
    headerWrap: {
        width: '100%',
        height: 44,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ddd'
    },
    headerLeftCancelTextStyle: {
        fontSize: 16,
        color: "#000"
    },
    headerRightPublishTouchStyle: {
        height: '100%',
        justifyContent: 'center',
        paddingLeft: 15 / zoomW,
        paddingRight: 15 / zoomW,
        position: 'absolute',
        top: 0
    },
    headerRightPublishTextStyle: {
        fontSize: 16,
        color: "#CACACA",
    },
    headerRightPublishedTextStyle: {
        fontSize: 16,

    },
    topSearchView :{
        flex :1,
        width:'100%',
        height:40/zoomH,
        backgroundColor:'#FFFFFF',
        borderRadius:2,
        display:'flex',
        marginLeft:15/zoomW,
        marginRight:15/zoomW
    },
    tabStyle:{
        height:(34/zoomH),
        backgroundColor:'#fff',
        elevation:0,
        borderWidth:StyleSheet.hairlineWidth
    },
    tabBarLine:{
        width:(20/zoomW),
        backgroundColor:'#FFFFFF',
        height:0,
        borderRadius:8,
        left:'24.5%',
        marginLeft:-(10/zoomW)
    },
    content:{
        width:'100%',
        display:'flex',
        backgroundColor:'#fff',
    },
    contentText:{
        width:'100%',
        flex:1,
        fontSize:16,
        color:'#333',
        textAlignVertical:'top',
        padding:0,
        paddingTop:(10/zoomH),
        paddingBottom:(10/zoomH)
    },
    img:{
        width:22/zoomW,
        height:22/zoomH,
        marginLeft:15/zoomW,
        marginRight:15/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'
    }
});