React Native 学习(三)---个人中心

图标地址: 链接：https://pan.baidu.com/s/1jI1mHk6 密码：je3j

//偷个懒，图标都是阿里素材直接下的，懒得改(当然，自己写着demo，简单易懂就好，工程上还是得好好命名)
/**
 * Created By WiFi ON 2017/12/5 16:46
 */
import React, { Component } from 'react';
import {
    View,
    Image,
    Text,
    StyleSheet,
    Dimensions,
    PixelRatio,
    ScrollView,
} from 'react-native';
export class PersonalCenter extends Component {
    render() {
        return (
            <View style={[styles.flex,{paddingBottom: 30,}]}>
                <Image style={[styles.part1Container]}
                       source={require("../img/personal/bg.jpg")}
                       resizeMode="cover"
                >
                    <View style={[styles.titleContainer, styles.center]}>
                        <View>
                            <Text style={[styles.title]}>渣渣商城</Text>
                        </View>
                    </View>
                    <View style={[styles.loginContainer, styles.center]}>
                        <View style={[{width: 80, height: 80, borderRadius: 50, backgroundColor: '#fff',}, styles.center]}>
                            <Image style={[styles.loginLogo]} source={require("../img/personal/头像.png")}/>
                        </View>
                        <Text style={[styles.loginText]}>登录/注册</Text>
                    </View>
                </Image>
                {/* Part2 */}
                <View style={[styles.part2Container]}>
                    <View style={[styles.part2MyOrder,styles.flex]}>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24, marginBottom: 15,}]}
                                    source={require('../img/personal/订单.png')}
                                    resizeMode="contain"
                            />
                        </View>
                        <View style={{flex: 8}}>
                            <Text style={[styles.fontSize18,styles.black]}>我的订单</Text>
                        </View>
                        <View style={{flex: 5}}>
                            <Text style={[styles.fontSize18]}>查看全部订单 ></Text>
                        </View>
                    </View>
                    <View style={[styles.flex, styles.flexDirectionRow, styles.center,styles.part2MyOrderListContainer]}>
                        <View  style={[styles.part2MyOrderItem]}>
                            <Image style={[styles.part2MyOrderItemImg]}
                                   source={require('../img/personal/代付款.png')}
                                   resizeMode="contain"
                            />
                            <Text>待付款</Text>
                        </View>
                        <View  style={[styles.part2MyOrderItem]}>
                            <Image style={[styles.part2MyOrderItemImg]}
                                   source={require('../img/personal/待发货.png')}
                                   resizeMode="contain"
                            />
                            <Text>待发货</Text>
                        </View>
                        <View  style={[styles.part2MyOrderItem]}>
                            <Image style={[styles.part2MyOrderItemImg]}
                                   source={require('../img/personal/待收货.png')}
                                   resizeMode="contain"
                            />
                            <Text>待收货</Text>
                        </View>
                        <View  style={[styles.part2MyOrderItem]}>
                            <Image style={[styles.part2MyOrderItemImg]}
                                   source={require('../img/personal/售后.png')}
                                   resizeMode="contain"
                            />
                            <Text>售后中</Text>
                        </View>
                        <View  style={[styles.part2MyOrderItem]}>
                            <Image style={[styles.part2MyOrderItemImg]}
                                   source={require('../img/personal/退货.png')}
                                   resizeMode="contain"
                            />
                            <Text>退货/款</Text>
                        </View>
                    </View>
                </View>
                {/*part3*/}
                <View style={[styles.part3]}>
                    <View style={[styles.part3Container]}>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/我的地址.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 我的地址</Text>
                        </View>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/收藏.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 我的收藏</Text>
                        </View>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/充值.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 我的充值</Text>
                        </View>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/分享.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 我的分享</Text>
                        </View>
                    </View>
                    <View style={[styles.part3Container]}>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/红包.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 代金红包</Text>
                        </View>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/代金券.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 优惠券</Text>
                        </View>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/个人资料.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 个人资料</Text>
                        </View>
                        <View style={[styles.part3Item]}>
                            <Image  style={ [styles.part3ItemImg ]}
                                    source={require('../img/personal/短信.png')}
                                    resizeMode="contain"
                            />
                            <Text style={ styles.part3ItemText}> 咨询信息</Text>
                        </View>
                    </View>
                </View>
                {/*part4*/}
                <View>
                    <View style={[styles.part4Item,styles.flex, styles.center]}>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24}]}
                                    source={require('../img/personal/浏览历史.png')}
                                    resizeMode="contain"
                            />
                        </View>
                        <View style={{flex: 10}}>
                            <Text style={[styles.part4ItemText]}>浏览历史</Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24,}]}
                                    source={require('../img/personal/右箭头.png')}
                                    resizeMode="contain"
                            />
                        </View>
                    </View>
                    <View style={[styles.part4Item,styles.flex, styles.center]}>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24}]}
                                    source={require('../img/personal/关于我们.png')}
                                    resizeMode="contain"
                            />
                        </View>
                        <View style={{flex: 10}}>
                            <Text style={[styles.part4ItemText]}>关于我们</Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24,}]}
                                    source={require('../img/personal/右箭头.png')}
                                    resizeMode="contain"
                            />
                        </View>
                    </View>
                    <View style={[styles.part4Item,styles.flex, styles.center]}>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24}]}
                                    source={require('../img/personal/帮助中心.png')}
                                    resizeMode="contain"
                            />
                        </View>
                        <View style={{flex: 10}}>
                            <Text style={[styles.part4ItemText]}>帮助中心</Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24,}]}
                                    source={require('../img/personal/右箭头.png')}
                                    resizeMode="contain"
                            />
                        </View>
                    </View>
                    <View style={[styles.part4Item,styles.flex, styles.center]}>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24}]}
                                    source={require('../img/personal/意见反馈.png')}
                                    resizeMode="contain"
                            />
                        </View>
                        <View style={{flex: 10}}>
                            <Text style={[styles.part4ItemText]}>意见反馈</Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24,}]}
                                    source={require('../img/personal/右箭头.png')}
                                    resizeMode="contain"
                            />
                        </View>
                    </View>
                    <View style={[styles.part4Item,styles.flex, styles.center]}>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24}]}
                                    source={require('../img/personal/客服热线.png')}
                                    resizeMode="contain"
                            />
                        </View>
                        <View style={{flex: 10}}>
                            <Text style={[styles.part4ItemText]}>客服热线: 8888-6666</Text>
                        </View>
                        <View style={{flex: 1}}>
                            <Image  style={[styles.part2MyOrderLogo, styles.flex1, {width: 24,height:24,}]}
                                    source={require('../img/personal/右箭头.png')}
                                    resizeMode="contain"
                            />
                        </View>
                    </View>
                </View>
            </View>
        );
    }
}
const onePT = 1/PixelRatio.get();
const utils = {
    'width': Dimensions.get('window').width,
    'height': Dimensions.get('window').height,
};
const styles = StyleSheet.create({
    flex: {
      display: 'flex',
    },
    flex1: {
      flex: 1,
    },
    flexDirectionRow: {
      flexDirection: 'row',
    },
    center: {
      alignItems: 'center',
      justifyContent: 'center',
    },
    fontSize18: {
      fontSize: 18,
    },
    fontSize20: {
        fontSize: 20,
    },
    lineLeftRight: {
        borderRightWidth: onePT,
        borderLeftWidth: onePT,
        borderColor: '#ccc',
    },
    lineBottom: {
        borderBottomWidth: onePT,
        borderColor: '#ccc',
    },
    black: {
      color: '#000',
    },
    part1Container: {
        width: utils.width,
        height: 200,
    },
    titleContainer: {
        width: utils.width,
        height: 30,
        marginTop: 10, marginBottom: 10,
    },
    title: {
        color: '#fff',
        fontSize: 16,
        paddingTop: 5,
    },
    loginContainer: {
        height: 120,
    },
    loginLogo: {

    },
    loginText: {
        color: '#fff',
        marginTop: 4,
        fontSize: 16,
    },
    part2Container: {
        width: utils.width,
        paddingTop: 10, paddingBottom: 10, paddingRight: 10, paddingLeft: 10,
    },
    part2MyOrder: {
        height: 40,
        flexDirection: 'row',
        width: utils.width,
        borderBottomColor: '#bbb', borderBottomWidth: onePT,
    },
    part2MyOrderLogo: {
        width: 32,
        height: 32,
    },
    part2MyOrderListContainer: {
        marginTop: 10,
    },
    part2MyOrderItem: {
        alignItems: 'center',
        justifyContent: 'center',
        flex: 1,
    },
    part2MyOrderItemImg: {
        width: 26,
        height: 26,
        marginBottom: 5,
    },
    part3: {
        borderBottomWidth: 10, borderTopWidth: 13, borderColor: "#F1F1F1",
    },
    part3Container: {
        flexDirection: 'row',
    },
    part3ItemImg: {
        width: 32,
        height: 32,
    },
    part3Item: {
        alignItems: 'center',
        justifyContent: 'center',
        height: 80,
        flex: 1,
        borderBottomWidth: onePT, borderRightWidth: onePT,
        borderColor: '#ccc',
    },
    part3ItemText: {
        marginTop: 7,
    },
    part4Item: {
        height: 40,
        paddingLeft: 10,
        flexDirection: 'row',
        width: utils.width,
        justifyContent: 'center',
        borderBottomColor: '#bbb', borderBottomWidth: onePT,
    },
    part4ItemText: {
        fontSize: 16,
    }
});