React Native商城项目实战10 - 个人中心中间内容设置

/**
* 个人中心中间内容设置
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableOpacity
} from 'react-native';

/**-------导入外部的json数据-------***/
var MiddleData = require('./MiddleData.json');

var MineMiddleView = React.createClass({
render() {
return (
<View style={styles.container}>
{this.renderAllItem()}
</View>
);
},

renderAllItem(){
// 定义组件数组
var itemArr = [];
// 遍历
for(var i=0; i<MiddleData.length; i++){
// 取出单独的数据
var data = MiddleData[i];
// 创建组件装入数组
itemArr.push(
<InnerView key={i} iconName={data.iconName} title={data.title}/>
);
}
// 返回
return itemArr;
}
});

// 里面的组件类
var InnerView = React.createClass({
getDefaultProps(){
return{
iconName: '',
title:''
}
},

render(){
return(
<TouchableOpacity activeOpacity={0.5} onPress={()=>{alert('0')}}>
<View style={styles.innerViewStyle}>
<Image source={{uri: this.props.iconName}} style={{width:40, height:30, marginBottom:3}}/>
<Text style={{color:'gray'}}>{this.props.title}</Text>
</View>
</TouchableOpacity>
);
}
});

const styles = StyleSheet.create({
container: {
// 设置主轴的方向
flexDirection:'row',
alignItems: 'center',
backgroundColor: 'white',
// 设置主轴的对齐方式
justifyContent:'space-around'
},

innerViewStyle:{
width:70,
height:70,

// 水平和垂直居中
justifyContent:'center',
alignItems:'center'
}
});

// 输出组件类
module.exports = MineMiddleView;

/**
* 我的
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';

/*======导入外部组件类======*/
var MyCell = require('./CommonMyCell');
var MiddleView = require('./MineMiddleView');

// ES5
var Mine = React.createClass({
render() {
return (
<ScrollView style={styles.scrollViewStyle}>
<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;

[
{"iconName":"order1", "title": "待付款"},
{"iconName":"order2", "title": "待使用"},
{"iconName":"order3", "title": "待评价"},
{"iconName":"order4", "title": "退款/售后"}
]