campus_react_local/App/views/community/ShortVideo/ShortVideoEndView.js

/**
 * Created by zack on 2018/4/19.
 */
import {
    View,
    Text,
    Image,
    StyleSheet,
    TouchableHighlight,
    ImageBackground
} from 'react-native'
import React, { PureComponent } from "react";
import ScreenDimensions from '../../../utils/ScreenDimensions'
import ScreenDimensionsClientHeight from '../../../utils/ScreenDimensions'
import NavigationBarHeight from '../../../utils/NavigationBarHeight'
import TabBarHeight from '../../../utils/TabBarHeight'
import RefreshInfiniteListView from '../../../utils/RefreshInfiniteListView'

export default class ShortVideoEndView extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            leftText: "",
            rightText: ""
        }
    }

    componentDidMount() {
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.selectedPages != this.props.selectedPages) {
            this.setState({
                rate: nextProps.selectedPages
            })
        }
    }



    render() {
        let chatIcon = require('../../../resources/images/TabBar/Community/ShortVideo/wechat.png');
        let backIcon = require('../../../resources/images/TabBar/Community/ShortVideo/circle_end.png');
        let chatFirendIcon = require('../../../resources/images/TabBar/Community/ShortVideo/firend.png');
        let QQIcon = require('../../../resources/images/TabBar/Community/ShortVideo/qq.png');
        let sinaIcon = require('../../../resources/images/TabBar/Community/ShortVideo/weibo.png');

        let replayIcon = require('../../../resources/images/TabBar/Community/ShortVideo/replay.png');
        return (
            <View style={styles.playJudgeStyle}>
                <View style={styles.judgeTopStyle}>
                    <View style={styles.judgeLineStyle}>
                    </View>
                    <Text style={styles.judgeTopTextStyle}>
                        {"分享到"}
                    </Text>
                    <View style={styles.judgeLineStyle}>
                    </View>
                </View>
                <View style={styles.judgeCenterStyle}>

                    <View style={styles.shareStyle}>
                        <ImageBackground source={backIcon} style={styles.backStyle}>
                            <TouchableHighlight
                                underlayColor={"rgba(255,255,255,0)"}
                                onPress={this.onPressChat.bind(this)}>
                                <View style={styles.shareChildrenView}>
                                    <Image source={chatIcon} style={styles.chatIcon} />
                                </View>
                            </TouchableHighlight>
                        </ImageBackground>
                        <Text style={styles.textStyle}>微信</Text>
                    </View>

                    <View style={styles.shareStyle}>
                        <ImageBackground source={backIcon} style={styles.backStyle}>
                            <TouchableHighlight
                                underlayColor={"rgba(255,255,255,0)"}
                                onPress={this.onPressChatFirend.bind(this)}>
                                <View style={styles.shareChildrenView}>
                                    <Image source={chatFirendIcon} style={styles.chatFirendStyle} />
                                </View>
                            </TouchableHighlight>
                        </ImageBackground>
                        <Text style={styles.textStyle}>朋友圈</Text>
                    </View>

                    <View style={styles.shareStyle}>
                        <ImageBackground source={backIcon} style={styles.backStyle}>
                            <TouchableHighlight
                                underlayColor={"rgba(255,255,255,0)"}
                                onPress={this.onPressQQ.bind(this)}>
                                <View style={styles.shareChildrenView}>
                                    <Image source={QQIcon} style={styles.QQStyle} />
                                </View>
                            </TouchableHighlight>
                        </ImageBackground>
                        <Text style={styles.textStyle}>QQ</Text>
                    </View>



                    <View style={styles.shareStyle}>
                        <ImageBackground source={backIcon} style={styles.backStyle}>
                            <TouchableHighlight
                                underlayColor={"rgba(255,255,255,0)"}
                                onPress={this.onPressSina.bind(this)}>
                                <View style={styles.shareChildrenView}>
                                    <Image source={sinaIcon} style={styles.sinaStyle} />
                                </View>
                            </TouchableHighlight>
                        </ImageBackground>
                        <Text style={styles.textStyle}>新浪微博</Text>
                    </View>

                </View>

                <View style={styles.judgeBottomStyle}>
                    
                         <TouchableHighlight
                                underlayColor={"rgba(255,255,255,0)"}
                                onPress={this.onPressReplay.bind(this)}>
                                <View style={styles.replayChildrenView}>
                                    <Image source={replayIcon} style={styles.replayStyle} />
                                    <Text style={styles.replayTextStyle}>{"重播"}</Text>
                                </View>
                            </TouchableHighlight>
                   
                </View>
            </View>
        )
    }
    onPressChat() {

    }
    onPressChatFirend(){

    }
    onPressQQ(){

    }
    onPressSina(){

    }
    onPressReplay(){
        //重播
        this.props.replay();
    }



}
const styles = StyleSheet.create({

    //播放结束的style
    playJudgeStyle: {
        width: ScreenDimensions.width,
        height: 195,
        marginTop: -195,
        backgroundColor: "rgba(0,0,0,0.9)"
    },
    judgeTopStyle: {
        marginHorizontal: 58 / 2,
        height: 62 / 2,
        marginTop: 32 / 2,
        flexDirection: "row",
        alignItems: "center"

    },
    judgeLineStyle: {
        flex: 1.5,
        height: 1,
        backgroundColor: "#ffffff"
    },
    judgeTopTextStyle: {
        // flex:1,
        marginHorizontal: 10,
        fontSize: 14,
        color: "#9c9c9c"
    },
    judgeCenterStyle: {
        marginHorizontal: 45 / 2,
        flexDirection: "row",
        alignItems: "center",
        marginTop:20,
    },
    shareChildrenView: {

        justifyContent: "center",
        alignItems: "center"
    },
    chatIcon: {
        width: 58 / 2,
        height: 49 / 2
    },
    textStyle: {
        fontSize: 14,
        color: "#9c9c9c",
        marginTop: 8,
    },
    backStyle: {
        width: 92 / 2,
        height: 92 / 2,
        justifyContent: "center",
        alignItems: "center"
    },
    shareStyle: {
        marginRight: 28 / 2,
        alignItems: "center",
        flex:1
    },
    chatFirendStyle:{
        width:47/2,
        height:47/2
    },
    QQStyle:{
        width:41/2,
        height:45/2
    },
    sinaStyle:{
        width:58/2,
        height:48/2
    },
    judgeBottomStyle:{
        justifyContent:"flex-start",
        alignItems:"center",
        flex:1,
        flexDirection:"row",
        paddingLeft:20,
    },
    replayChildrenView:{
        alignItems:"center",
        flexDirection:"row"
    },
    replayStyle:{
        width:14,
        height:14
    },
    replayTextStyle:{
      fontSize:14,
      color:"#fff",
      marginLeft:13
    }
})