1.创建MineHeaderView.js
/** * 个人中心头部内容 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native'; // 导入系统类 var Dimensions = require('Dimensions'); var screenW = Dimensions.get('window').width; // ES5 var HeaderView = React.createClass({ render() { return ( <View style={styles.container}> {this.renderTopView()} {this.renderBottomView()} </View> ); }, renderTopView(){ return( <View style={styles.topViewStyle}> <Image source={{uri:'see'}} style={styles.leftIconStyle} /> <View style={styles.conterViewStyle}> <Text style={{fontSize:18,color:'white',fontWeight:'bold'}}>京东电商</Text> <Image source={{uri:'avatar_vip'}} style={{17,height:17}} /> </View> <Image source={{uri:'icon_cell_rightArrow'}} style={{8,height:13,marginRight:8}} /> </View> ) }, renderBottomView(){ return( <View style={styles.bottomViewStyle}> {this.renderBottomItem()} </View> ) }, renderBottomItem(){ // 组件数组 var items = []; // 数据 var dataArr = [{'number':'100', 'title':'购物券'},{'number':'12', 'title':'评价'},{'number':'50', 'title':'收藏'}]; // 遍历创建组件转入数组 for (var i=0;i<dataArr.length;i++){ var data = dataArr[i]; items.push( <TouchableOpacity key={i}> <View style={styles.bottomInnerViewStyle}> <Text style={{color:'white'}}>{data.number}</Text> <Text style={{color:'white'}}>{data.title}</Text> </View> </TouchableOpacity> ); } return items; }, }); const styles = StyleSheet.create({ container: { height:200, backgroundColor:'rgb(255,96,0)' }, topViewStyle:{ flexDirection:'row', marginTop:80, alignItems:'center', justifyContent:'space-around' }, leftIconStyle:{ 70, height:70, borderRadius:35, borderWidth:3, borderColor:'rgba(0,0,0,0.2)', }, conterViewStyle:{ flexDirection:'row', screenW * 0.6, }, bottomViewStyle:{ flexDirection:'row', position:'absolute', bottom:0, }, bottomInnerViewStyle:{ (screenW/3)+1, height:40, backgroundColor:'rgba(255,255,255,0.4)', justifyContent:'center', alignItems:'center', borderRightWidth:1, borderRightColor:'white' } }); // 输出 module.exports = HeaderView;
2.Mine.js使用这个组件
/** * 我的 */ import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ScrollView } from 'react-native'; /*======导入外部组件类======*/ var MyCell = require('./CommonMyCell'); var MiddleView = require('./MineMiddleView'); var HeaderView = require('./MineHeaderView'); // ES5 var Mine = React.createClass({ render() { return ( <ScrollView style={styles.scrollViewStyle}> <HeaderView /> <View style={{marginTop:20}}> <MyCell leftIconName="collect" leftTitle="我的订单" rightTitle="查看全部订单" /> <MiddleView /> </View> <View style={{marginTop:20}}> <MyCell leftIconName="draft" leftTitle="钱包" rightTitle="账号余额:¥100.88" /> </View> <View style={{marginTop:20}}> <MyCell leftIconName="voucher" leftTitle="抵用券" rightTitle="10张" /> </View> <View style={{marginTop:20}}> <MyCell leftIconName="mall" leftTitle="积分商城" rightTitle="" /> </View> <View style={{marginTop:20}}> <MyCell leftIconName="recommend" leftTitle="今日推荐" rightTitle="" /> </View> </ScrollView> ); } }); const styles = StyleSheet.create({ scrollViewStyle:{ } }); // 输出 module.exports = Mine;
3.效果图