efunbox-mobile-8/pages/userCenter.js

/* 
 * 个人中心页面
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
    Button,
    StatusBar,
    Modal,
    TouchableHighlight,
    DeviceEventEmitter,
    ScrollView
} from "react-native";
import BasePage from "./BasePage";
import Dimensions from './utils/dimensions'

export default class userCenter extends BasePage {
    state = {
        nickName: "初始昵称",
        schoolName: "未设置",
        ifDiscount: true,
        isVIP: false,
        btnArr: [
            { title: '订单', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
            { title: '优惠券', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
            { title: '活动', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
            { title: '客服', icon: 'https://facebook.github.io/react-native/docs/assets/favicon.png' },
        ]
    };
    render() {
        let btnRender = null;
        this.state.btnArr.forEach((item) => {
            btnRender + (
                <View style={styles.btnItem}>
                    <Image
                        source={{ uri: item.icon }}
                        style={styles.btnIcon}
                    />
                    <Text
                        style={styles.btnTitle}
                    >
                        {item.title}
                    </Text>
                </View>
            )
        })
        return (
            <ScrollView style={{ height: 1000, overflow: 'scroll' }}>
                <View style={styles.topSection}>
                    <ImageBackground
                        source={
                            require('./images/userCenter/top-bg.png')
                        }
                        style={{width: '100%',height: 203}}
                    >
                        <View style={styles.userInfo}>
                            
                        </View>
                        <View style={styles.btnBox}>
                            {btnRender}
                        </View>
                    </ImageBackground>

                </View>
                <View style={styles.discountSection}></View>
                <View style={styles.recordSection}></View>
                <View style={styles.collectSection}></View>
            </ScrollView>
        )
    }
}

const styles = StyleSheet.create({
    topSection: {
        height: 250,
        width: Dimensions.width,
        // backgroundColor: 'red'
    },
    discountSection: {
        width: Dimensions.width,
        height: 242,
        backgroundColor: 'green'
    },
    recordSection: {
        width: Dimensions.width,
        height: 235,
        backgroundColor: 'blue'
    },
    collectSection: {
        width: Dimensions.width,
        height: 235,
        backgroundColor: 'yellow'
    }
})