campus_react_local/App/views/play/Video/CAVideoBannerView.js

/**
 * Created by Sean on 2018/5/9.
 */
import {
	View,
	Text,
	StyleSheet,
    TouchableOpacity,
    TouchableWithoutFeedback,
    ScrollView,
    Image,
    Animated
} from 'react-native'
import React, {Component} from 'react'
import PropTypes from 'prop-types';
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import startsWith from 'lodash/startsWith';
const BANNER_IMGS = [
    require('../../../resources/Play/Video/img_top.png'),
];

export default class CAVideoBannerView extends Component {
    constructor(props) {
        super(props);

    }

    _onPress = () => {
        if (this.props.onBannerPress) {
            this.props.onBannerPress();
        }
    }

    render() {
        return(
            <View>
                <TouchableOpacity onPress={this._onPress}>
                    <Image style={styles.bannerImageContainer} 
                        source={require('../../../resources/Play/Video/img_top.png')} 
                        resizeMode={'cover'}/>
                </TouchableOpacity>
                <CAVideobannerTitle />
                <View style={{width: ScreenDimensions.width, height:2.0, backgroundColor: '#efeff4', position: 'absolute', left: 0,
					bottom: 0}} />
            </View>
        );
    }
 
}

class CAVideobannerTitle extends Component {
    constructor(props) {
        super(props)
    }
    
    render() {
        return(
            <View style={styles.bannerTitleContainer}>
                <Text style={styles.title}>How (and why) Russia hacker the US election</Text>
            </View> 
        );
    }
}

const styles = StyleSheet.create({
    View: {
        width: ScreenDimensions.width,
        height: 203,
        // backgroundColor: '#ffffff',
        backgroundColor: 'red',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    bannerImageContainer: {
        width: ScreenDimensions.width,
        height: 203
    },
    bannerTitleContainer: {
        height: 64,
        justifyContent: 'center'
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        color: "#000000",
        marginHorizontal: 12
    },
    container: {
        flex:1,
        flexDirection:'row',
    },
    circleContainer: {
        position:'absolute',
        left:0,
        top:120,
    },
    circle: {
        width:6,
        height:6,
        borderRadius:6,
        backgroundColor:'#f4797e',
        marginHorizontal:5,
    },
    circleSelected: {
        width:6,
        height:6,
        borderRadius:6,
        backgroundColor:'#ffffff',
        marginHorizontal:5,
    }
})