React Native 学习(三)---个人中心
来源：互联网 发布：手机淘宝实名认证开店 编辑：程序博客网 时间：2024/05/22 03:53
图标地址: 链接：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, }});阅读全文
0 0
- React Native 学习(三)---个人中心
- React Native学习三
- React Native 学习三
- React Native商城项目实战11 - 个人中心头部内容
- react native组件学习(三)
- React Native个人见解。
- 为什么学习React Native三点原因
- React-Native UI学习之轮播图(三)
- React-native 学习笔记（三）
- React Native商城项目实战09 - 个人中心自定义cell
- React Native商城项目实战10 - 个人中心中间内容设置
- React Native项目实战之搭建美团个人中心界面
- React Native 三:样式
- (三)React Native---TextInput
- React-Native(三)--Button
- iOS native 与 React Native 个人见解
- 学习React Native(三)HelloWorld 基本源码学习
- react-native 学习 ----- React Navigation
- SQL关键字
- 三角形判断
- 查询学生 学号、姓名和平均成绩
- Understanding G1 Log
- 多线程
- React Native 学习(三)---个人中心
- oracle11g静默安装
- js在页面搜索定位某一元素的位置
- 35年编程史沉淀下来的8条宝贵经验
- 【C#】用C#实现封装
- 15周多线程1
- Storm中拓扑
- 内存泄漏调试-gperftools heapcheck 使用
- linuxC相关知识--gcc和Makefile的学习
