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

/**
 * Created by Sean on 2018/5/9.
 */
import {
	View,
	Text,
	StyleSheet,
    TouchableOpacity,
    TouchableWithoutFeedback,
    ScrollView,
    SectionList,
    Image,
    FlatList
} from 'react-native'
import React, {Component} from 'react'
import PropTypes from 'prop-types';
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'

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

    render() {
        return(
            <View style={styles.pageContainer}>
                <View style={styles.titleContainer}>
                    <Text style={styles.discussTitle}>
                        全部讨论(3)
                    </Text>
                </View>
                <FlatList
						data = {[1,2,3]}
						renderItem={({item}) => this.renderItem(item)}
						keyExtractor = {(item,index) =>{
							return 'key' + item.key + index
						}}
						ListFooterComponent = {() => {
							return(
								<View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'red'}} />
							)
						}}
				/>
            </View>
        );
    }

    renderItem(item) {
        let LikeIcon = require('../../../resources/images/TabBar/Community/SmallVideo/VideoDetails/like_hover.png');
        return(
            <View style={styles.itemContainer}>
                <View style={styles.leftContainer}>
                    <Image style={styles.avatarImage} source={require('../../../resources/images/TabBar/Community/Answer/img.png')}/>
                </View>
                <View style={{flex: 3}}>
                    <Text style={[styles.normalText, {marginTop: 36}]}>Michae</Text>
                    <Text style={[styles.normalText, {marginTop: 15}]}>仍然是早晚半小时，把所有的单词都口头造不同的句子</Text>
                    <View style={styles.bottomContainer}>
                        <Text style={styles.lightColorText}>04-03</Text>
                        <Text style={[styles.lightColorText, {marginLeft: 10}]}>23:34</Text>
                    </View>
                </View>
                <View style={styles.rightContainer}>
                    <Image style={styles.likeIcon} source={LikeIcon}/>
                    <Text style={[styles.normalText, {marginTop: 10}]}>2324</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    pageContainer: {
        width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height - 78 - 78 - 45 - 10,
    },
    titleContainer: {
        height: 56,
        borderBottomColor: '#efeff4',
        borderBottomWidth: 1,
        justifyContent:'center'
    },
    discussTitle: {
        fontSize: 18,
        color: "#666666",
        marginHorizontal: 12
    },
    itemContainer:{
        flex: 1,
        flexDirection: 'row',
        height: 140,
        width: ScreenDimensions.width,
    },
    leftContainer: {
        flex: 1, 
        justifyContent: 'center',
        alignItems:'center',
    },
    rightContainer: {
        flex: 1, 
        justifyContent: 'center',
        alignItems: 'center'
    },
    avatarImage: {
        width: 48,
		height: 48,
		borderRadius: 24,
    },
    likeIcon:{
        width: 52/2,
        height: 25,
    },
    normalText: {
        fontSize: 14,
        color: "#434242"
    },
    lightColorText: {
        fontSize: 13,
        lineHeight: 12,
        color: "#9c9c9c",
    },
    bottomContainer: {
        marginTop: 17,
        height: 20, 
        flexDirection: 'row', 
        alignItems: 'center'
    }
});