xntalk / xntalk-rnapp

/**
 * Created by Cassie on 2018/03/06
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    Image,
    ScrollView,
    TextInput,
    Platform,
    NativeModules,
    Modal,
    Keyboard
} from 'react-native';
import Video from 'react-native-video';

import {width,height,zoomW,zoomH} from '../../utils/getSize';
import {xnBorderWidth} from "../../utils/utils";

const back = require('../../img/back.png');
const close = require('../../img/close.png');
const ddd = require('../../img/ddd.png');
const eachMore = require('../../img/eachMore.png');
const video = require('../../img/video.png');
const emoji = require('../../img/emoji.png');
const pictrue = require('../../img/pictrue.png');

export default class Detail extends Component {
    static navigationOptions = ({ navigation, screenProps })=>({
        title: '详情',
        headerLeft:(<View style={{display:'flex',flexDirection:'row'}}>
            <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.back:null}>
                <Image source={back} style={styles.backIcon} resizeMode="contain" />
            </TouchableOpacity>
            <TouchableOpacity style={styles.leftIcon} onPress={navigation.state.params?navigation.state.params.close:null}>
                <Image source={close} style={styles.closeIcon} resizeMode="contain" />
            </TouchableOpacity>
        </View>),
        headerRight:(<View style={styles.rightTop}>
            <TouchableOpacity style={styles.rightIcon}>
                <Image source={ddd} style={styles.moreIcon} resizeMode="contain" />
            </TouchableOpacity>
        </View>)
    });

    constructor(props) {
        super(props);
        this.state={
            marginBottom:0,
            replaySee:false,
            modalVisible:false
        }
    };

    componentWillUnmount() {
        this.keyboardShow.remove();
        this.keyboardHide.remove();
    };

    componentWillMount(){
        this.keyboardShow = Keyboard.addListener('keyboardDidShow', this.updateKeyboardSpace.bind(this));
        this.keyboardHide = Keyboard.addListener('keyboardWillHide', this.resetKeyboardSpace.bind(this));
        this.keyboardHide = Keyboard.addListener('keyboardDidHide', this.resetKeyboardSpace.bind(this));
    };

    componentDidMount(){
        //设置头部
        this.props.navigation.setParams({
            back:()=>{
                this.props.navigation.goBack();
            },
            close:()=>{
                NativeModules.system.navTo("BACK");
            }
        });
    };

    updateKeyboardSpace(e){
        let _this = this;
        if(Platform.OS == 'ios'){
            setTimeout(function(){
                _this.setState({
                    marginBottom:(40/zoomH),
                });
            },200)
        }
    };

    resetKeyboardSpace(){
        this.closeReplay();
    };

    /*显示回复输入框*/
    showReplay(){
        this.setState({
            replaySee:true
        })
    };
    /*收起回复输入框*/
    closeReplay(){
        this.setState({
            replaySee:false
        },function(){
            this.setState({
                marginBottom:0
            });
        })
    };
    /* 查看图片*/
    openModal(url) {
        this.setState({
            modalVisible: true,
            url,
        });
    };
    closeModal() {
        this.setState({
            modalVisible: false,
        });
    };

    render() {
        return (
            <View style={{display:'flex',flex:1}}>
                {/*<Image source={video} style={styles.contentVideo} resizeMode="cover" />*/}
                <Video source={{uri:"https://nim.nosdn.127.net/MTAzNTMyNg==/bmltYV8xMTA2MDcwNTg1XzE1MTE4NjEyNDc5ODBfZTFkODA1YjQtNmVkNS00NDk2LTg1YWItYWMwZmU4NDkyZGEy"}}
                       resizeMode="contain"           // 视频的自适应伸缩铺放行为，
                       repeat={true}                // 是否重复播放
                       playWhenInactive={false}     // [iOS] Video continues to play when control or notification center are shown. 仅适用于IOS
                       style={{width:width,height:(190/zoomH),backgroundColor:'#000'}}
                     />
                <ScrollView style={styles.background}>
                    <View style={styles.title}>
                        <Text style={{color:"#333",fontSize:24,fontWeight:'600'}}>
                            <Text style={{color:"#576b95",lineHeight:30}}>【置顶】</Text>怎么看金蝶投资「纷享销客」5000万美元？
                        </Text>
                    </View>
                    <View style={styles.content}>
                        <View style={styles.author}>
                            <Image source={video} style={styles.avatar} resizeMode="cover" />
                            <View style={{height:(32/zoomH),display:'flex',justifyContent:'center'}}>
                                <Text style={{fontSize:16,color:'#576b95'}}>张丽</Text>
                                <Text style={{fontSize:12,color:'#999',marginTop:(4/zoomH)}}>灌水区 | 01-20</Text>
                            </View>
                        </View>
                        <Text style={{fontSize:18,color:'#000',lineHeight:35}}>日前，36氪由内部消息获悉，猫眼与微影相关业务整合已经完成，并在近期获得腾讯10亿人民币的投资。投资完成之后，腾讯依然是猫眼第二大股东。{"\n"}{"\n"}
                            一个多月前，猫眼和微影时代宣布达成战略合作，组建新公司猫眼微影。随后，新猫眼开始业务重整，将相关团队和资产以业务单元为基础进行了调整。10月中旬，猫眼总部迁入新址，两班人马合署办公，团队整合基本完成。</Text>
                        <TouchableOpacity onPress={() => this.openModal('http://e.hiphotos.baidu.com/image/pic/item/3801213fb80e7bec00e429f3232eb9389b506be1.jpg')}>
                            <Image source={{uri: 'http://e.hiphotos.baidu.com/image/pic/item/3801213fb80e7bec00e429f3232eb9389b506be1.jpg'}} style={styles.contentPic} resizeMode="contain" />
                        </TouchableOpacity>
                        <Text style={{fontSize:12,color:'#333'}}>来源板块：灌水区</Text>
                    </View>
                    <View style={{height:(8/zoomW),backgroundColor:'#f3f3f3'}} />
                    <View style={styles.tab}>
                        <View style={[styles.barItem,{borderBottomWidth:2}]}>
                            <Text style={{fontSize:16,color:'#000'}}>全部回复</Text>
                        </View>
                        <View style={styles.barItem}>
                            <Text style={{fontSize:16,color:'#666'}}>只看楼主</Text>
                        </View>
                    </View>
                    <View style={styles.replayItem}>
                        <View style={styles.replay}>
                            <Image source={video} style={styles.avatar} resizeMode="cover" />
                            <View style={styles.nameBox}>
                                <View style={{display:'flex',justifyContent:'center'}}>
                                    <View style={{display:'flex',flexDirection:'row',alignItems:'center'}}>
                                        <Text style={{fontSize:16,color:'#576b95'}}>张丽</Text>
                                        <View style={styles.landlord}>
                                            <Text style={{color:'#808080',fontSize:10}}>楼主</Text>
                                        </View>
                                    </View>
                                    <Text style={{fontSize:12,color:'#999',marginTop:(4/zoomH)}}>1楼 | 01-20</Text>
                                </View>
                                <View>
                                    <Image source={eachMore} style={styles.moreIcon} resizeMode="contain" />
                                </View>
                            </View>
                        </View>
                        <View style={styles.replayContent}>
                            <Text style={{fontSize:18,color:'#000',lineHeight:35}}>真是很好的学习资料！学习了，这样的资料应该多一些！</Text>
                            <Image source={{uri: 'http://e.hiphotos.baidu.com/image/pic/item/3801213fb80e7bec00e429f3232eb9389b506be1.jpg'}} style={styles.contentPic} resizeMode="contain" />
                            <View style={styles.reMark}>
                                <Text style={{fontSize:14,color:'#333',lineHeight:25}}><Text style={{color:'#4a6d9f'}}>张三：</Text>给力！</Text>
                                <Text style={{fontSize:14,color:'#333',lineHeight:25}}><Text style={{color:'#4a6d9f'}}>李斯：</Text> 回复张三：一个多月前，猫眼和微影时代宣布达成战略合作，组建新公司猫眼微影。随后，新猫眼开始业务重整，将相关团队和资产以业务单元为基础进行了调整。</Text>
                                <Text style={{fontSize:14,color:'#333',lineHeight:25}}><Text style={{color:'#4a6d9f'}}>张丽 | 楼主：</Text>给力！</Text>
                                <TouchableOpacity onPress={() => {}}><Text style={{fontSize:14,color:'#4a6d9f',lineHeight:25}}>查看全部60条回复</Text></TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </ScrollView>
                <View style={styles.bottomInput}>
                    <TouchableOpacity style={[styles.replayInput,{flex:2}]} onPress={() => this.showReplay()}>
                        <Text style={{color:'#999',fontSize:18}}>说说你的看法…</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={[styles.replayInput,{flex:1,alignItems:'flex-end'}]} onPress={() => this.showReplay()}>
                        <Text style={{color:'#576b95',fontSize:18}}>发表</Text>
                    </TouchableOpacity>
                </View>
                <Modal animationType={'none'} transparent={true} visible={this.state.replaySee} onRequestClose={() => {}}>
                    <TouchableOpacity style={styles.modalBg} onPress={() => this.closeReplay()}>
                        <View style={[styles.replayBox,{marginBottom:this.state.marginBottom}]}>
                            <View style={{display:'flex',flexDirection:'row',padding:(10/zoomH)}}>
                                <TextInput autoFocus={true} placeholder="发表回复…" underlineColorAndroid="transparent" multiline={true} style={styles.modalInput} />
                                <TouchableOpacity style={{width:(50/zoomW),display:'flex',justifyContent:'flex-end',alignItems:'center'}}>
                                    <Text style={{color:'#576b95',fontSize:18}}>发表</Text>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.bottomTip}>
                                <TouchableOpacity>
                                    <Image source={emoji} style={styles.iconTip} resizeMode="cover" />
                                </TouchableOpacity>
                                <TouchableOpacity>
                                    <Image source={pictrue} style={styles.iconTip} resizeMode="cover" />
                                </TouchableOpacity>
                            </View>
                        </View>
                    </TouchableOpacity>
                </Modal>
                <Modal
                    animationType={'fade'} transparent visible={this.state.modalVisible} onRequestClose={() => {}}
                >
                    <TouchableOpacity activeOpacity={1} onPress={this.closeModal.bind(this)}>
                        <View style={styles.ImgmodalBg}>
                            <Image style={{ width: '100%', height: '100%' }} resizeMode="contain" source={{ uri: this.state.url }} />
                        </View>
                    </TouchableOpacity>
                </Modal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    leftIcon:{
        width:(50/zoomW),
        height:'100%',
        display:'flex',
        flexDirection:'row',
        alignItems:'center'
    },
    backIcon:{
        width:(16/zoomW),
        height:(16/zoomH),
        marginLeft:(10/zoomW)
    },
    closeIcon:{
        width:(16/zoomW),
        height:(16/zoomH)
    },
    rightTop:{
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
    },
    rightIcon:{
        height:'100%',
        width:(34/zoomW),
        display:'flex',
        justifyContent:'center',
    },
    moreIcon:{
        width:(20/zoomW),
        height:(20/zoomW)
    },
    background:{
        flex:15,
        width:'100%',
        height:'100%',
        backgroundColor:'#fff'
    },
    title:{
        marginTop:(20/zoomH),
        marginBottom:(20/zoomH),
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
    },
    content:{
        paddingLeft:(25/zoomW),
        paddingRight:(25/zoomW),
        paddingBottom:(15/zoomH)
    },
    author:{
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        marginBottom:(25/zoomH),
        marginLeft:-(10/zoomW)
    },
    avatar:{
        width:(36/zoomW),
        height:(36/zoomW),
        marginRight:(10/zoomW),
        borderRadius:2
    },
    contentVideo:{
        width:'100%',
        margin:0
    },
    contentPic:{
        width:(100/zoomH),
        height:(100/zoomH),
        marginTop:(20/zoomH),
        marginBottom:(20/zoomH)
    },
    tab:{
        width:'100%',
        height:(45/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(18/zoomW),
    },
    barItem:{
        marginRight:(30/zoomW),
        height:'100%',
        display:'flex',
        justifyContent:'center'
    },
    replayItem:{
        paddingBottom:(20/zoomH),
        borderBottomWidth:xnBorderWidth(),
        borderBottomColor:'#eee',
        borderStyle:'solid'
    },
    replay:{
        display:'flex',
        flexDirection:'row',
        padding:(15/zoomW)
    },
    nameBox:{
        width:(295/zoomW),
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between'
    },
    landlord:{
        width:(30/zoomW),
        height:(15/zoomH),
        borderWidth:xnBorderWidth(),
        borderColor:'#808080',
        borderStyle:'solid',
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
        marginLeft:(5/zoomW),
        borderRadius:2
    },
    replayContent:{
        paddingLeft:(62/zoomW),
        paddingRight:(16/zoomW)
    },
    reMark:{
        backgroundColor:'#f4f4f4',
        padding:(10/zoomW)
    },
    bottomInput:{
        width:'100%',
        minHeight:(44/zoomH),
        borderTopWidth:1,
        borderTopColor:'#ddd',
        borderStyle:'solid',
        backgroundColor:'#fff',
        paddingLeft:(15/zoomW),
        paddingRight:(15/zoomW),
        display:'flex',
        flexDirection:'row',
        justifyContent:'space-between'
    },
    replayInput:{
        display:'flex',
        justifyContent:'center'
    },
    modalBg:{
        width:'100%',
        height:'100%',
        backgroundColor:'rgba(0,0,0,.5)',
        display:'flex',
        justifyContent:'flex-end'
    },
    replayBox:{
        width:'100%',
        height:(160/zoomH),
        backgroundColor:'#fff',
        display:'flex'
    },
    modalInput:{
        flex:1,
        height:(100/zoomH),
        textAlignVertical:'top',
        fontSize:18
    },
    bottomTip:{
        width:'100%',
        height:(40/zoomH),
        borderTopWidth:xnBorderWidth(),
        borderTopColor:'#eee',
        borderStyle:'solid',
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:(10/zoomW),
        paddingRight:(10/zoomW)
    },
    iconTip:{
        width:(20/zoomW),
        height:(20/zoomW),
        marginRight:(40/zoomW)
    },
    ImgmodalBg: {
        width: '100%',
        height: '100%',
        backgroundColor: '#000',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
    }
});