efunbox-mobile-8/pages/buy/order.js

/* 
 * 
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    FlatList,
    TouchableHighlight,
    DeviceEventEmitter,
    ScrollView
} from "react-native";
import BasePage from "../BasePage";
import Dimensions from '../utils/dimensions';
import TopicTitle from '../components/TopicTitle';

export default class Order extends BasePage {
    state = {
        data: {
            title: '学前课程', list: [
                { title: '生活好榜样', time: '2019-10-01' },
                { title: '生活好榜样2', time: '2019-10-01' },
                { title: '生活好榜样3', time: '2019-10-01' },
                { title: '生活好榜样第二期', time: '2019-10-01' },
            ]
        }

    };
    renderItem = (item, index) => {
        return (
            <View>
                {
                    index === 0
                        ?
                        <TopicTitle title={this.state.data.title} ifTubeShow={true} />
                        :
                        null
                }
                <View style={styles.item}>
                    <View style={styles.left}>
                        <Text style={styles.title}>{item.title}</Text>
                        <Text style={styles.time}>有效期:{item.time}</Text>
                    </View>
                    <View style={styles.right}>
                        <Text style={styles.study}>去学习</Text>
                    </View>
                </View>
            </View>
        )
    }
    render() {
        return (
            <FlatList

                data={this.state.data.list}
                horizontal={false}
                renderItem={({ item, index }) => this.renderItem(item, index)}
                keyExtractor={(item, index) => index.toString()}
            />
        )
    }
}

const styles = StyleSheet.create({
    item: {
        width: Dimensions.width,
        height: Dimensions.getHeight(79),
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 14,
        borderTopWidth: 1,
        borderColor: '#f0f1f5'
    },
    left: {
        flexDirection: 'column'
    },
    title: {
        fontSize: 18,
        color: '#151515'
    },
    time: {
        fontSize: 14,
        color: '#555'
    },
    right: {
        width: Dimensions.getWidth(83),
        height: Dimensions.getHeight(27),
        borderRadius: 14,
        backgroundColor: '#ffae59',
        justifyContent: 'center',
        alignItems: 'center'
    },
    study: {
        color: '#fff',
        fontSize: 16
    }
})