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,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,}]} source={require('../img/personal/右箭头.png')} resizeMode="contain" /> </View> </View> <View style={[styles.part4Item,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,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,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,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,}]} 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,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,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',flex: 1,part2MyOrderItemImg: { width: 26,height: 26,marginBottom: 5,part3: { borderBottomWidth: 10,borderTopWidth: 13,borderColor: "#F1F1F1",part3Container: { flexDirection: 'row',part3ItemImg: { width: 32,part3Item: { alignItems: 'center',height: 80,borderRightWidth: onePT,part3ItemText: { marginTop: 7,part4Item: { height: 40,part4ItemText: { fontSize: 16,} });