campus_react_local/App/views/community/SmallVideo/BottomView.js

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

export default class BottomView extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectLike:false
        }
    }

    componentDidMount() {
    }
    componentWillReceiveProps(nextProps) {

    }


    render() {
        let uerIcon = require('../../../resources/images/TabBar/Community/SmallVideo/user_3.png');

        let addIcon = require('../../../resources/images/TabBar/Community/SmallVideo/follow.png');

        let LikeSelectIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/like_hover.png');
        let LikeIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/like.png');

        let messIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/mess.png');
        let  forwardIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/forward.png');
        let cameraIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/camera.png');
        let inputIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/input.png');
        let penIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/pen.png');

        let expressIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/Express.png');
        return (
            <View
                style={styles.View}>
                <View style={styles.topStyle}>
                    <View style={styles.rightStyle}>
                        <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressAdd.bind(this)}>
                                <View  style={styles.ImageView}>
                                        <Image source={uerIcon} style={styles.userIcon} />
                                        <Image source={addIcon} style={styles.followStyle} />
                                </View>
                        </TouchableHighlight>

                          <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressLike.bind(this)}>
                                <View  style={styles.LikeView}>
                                        <Image source={this.state.selectLike?LikeSelectIcon:LikeIcon} style={styles.likeIcon} />
                                         <Text style={styles.textStyle}>688</Text>
                                </View>
                        </TouchableHighlight>

                         <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressMess.bind(this)}>
                                <View  style={styles.messView}>
                                        <Image source={messIcon} style={styles.messIcon} />
                                         <Text style={styles.textStyle}>688</Text>
                                </View>
                        </TouchableHighlight>

                         <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressForWard.bind(this)}>
                                <View  style={styles.forwardView}>
                                        <Image source={forwardIcon} style={styles.forwardIcon} />
                                         <Text style={styles.textStyle}>688</Text>
                                </View>
                        </TouchableHighlight>

                    </View>
                </View>

                <View style={styles.bottomStyle}>
                  <Text style={styles.bottomText}>轮从小的英语环境的重要性轮从小的英语环境的重要性</Text>
                  <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressCamera.bind(this)}>
                                <View  style={styles.cameraView}>
                                        <Image source={cameraIcon} style={styles.cameraIcon} />
                                     
                                </View>
                    </TouchableHighlight>
                </View>

                 <TouchableHighlight
                            underlayColor={"rgba(255,255,255,0)"}
                            onPress={this.onPressBoard.bind(this)}>
                            <View>
                                <ImageBackground source={inputIcon} style={styles.inputView}>
                                        <View style={{flexDirection:"row",justifyContent:"center"}}>
                                        <Image source={penIcon} style={styles.penIcon} />
                                        <Text style={styles.inputStyle}>写评论....</Text>
                                        </View>
                                        <View>
                                        <Image source={expressIcon} style={styles.expressIcon} />
                                        </View>
                                </ImageBackground>
                                </View>
                    </TouchableHighlight>

            </View>
        );
    }
    onPressAdd(){
        //添加好友
    }
    onPressLike(){
        //点赞
        let bool= this.state.selectLike;
        this.setState({
            selectLike:!bool
        })

    }
    onPressMess(){
          //评论
          console.log("评论")
    }
    onPressForWard(){
        //分享
        console.log("分享")
    }
    onPressCamera(){
        //去拍摄
        console.log("去拍摄")
        this.props.onPressInput()
    }
    onPressBoard(){
        //弹出输入框
        console.log("弹出输入框")
        this.props.onPressInput()
    }

}
const styles = StyleSheet.create({
    View:{
        position: 'absolute',
        // top: (250/640)*(ScreenDimensions.height),
        left: 0,
        right: 0,
      
        bottom:0,
        width:ScreenDimensions.width,
        height:340,
    },
    topStyle: {
        alignItems: "flex-end"
    },
    bottomStyle:{
       
        justifyContent:"space-between",
        flexDirection:"row"
    },
    rightStyle: {
        flexDirection: "column",
        marginRight:13
    },
    ImageView:{
        width:45,
        height:45,
        borderRadius:45,
        alignItems:"center"
    },
    userIcon: {
        width: 40,
        height: 40,
       
    },
    followStyle: {
        width: 12,
        height: 12,
        marginTop: -8,
    },
    textStyle:{
       color:"#ffffff",
       fontSize:14,
       marginTop:5
    },
    LikeView:{
        width:45,
        height:45,
        marginTop:15,
        alignItems:"center"
    },
    likeIcon:{
        width: 52/2,
        height: 25,
    },
    messView:{
        width:45,
        height:45,
        marginTop:15,
        alignItems:"center"
    },
    messIcon:{
        width: 52/2,
        height: 25,
    },
    forwardView:{
        width:45,
        height:45,
        marginTop:15,
        alignItems:"center"
    },
    forwardIcon:{
        width: 52/2,
        height: 56/2,
    },
    bottomText:{
       width:200,
       fontSize:14,
       color:"#ffffff",
       marginLeft:15,
       marginTop:15,
    },
    cameraIcon:{
        width: 57/2,
        height: 49/2,
    },
    cameraView:{
        width:45,
        height:45,
        marginTop:15,
        marginRight:15,
        alignItems:"center"
    },
    inputView:{
        marginHorizontal:15,
      
        height:87/2,
        justifyContent:"space-between",
        flexDirection:"row",
        alignItems:"center"
    },
    inputStyle:{
        color:"#ffffff",
        fontSize:14,
      
     },
    penIcon:{
        width:16,
        height:16,
        marginLeft:15,
        marginRight:15,
    },
    expressIcon:{
        width:20,
        height:20,
        marginRight:15,
    }
})