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

1.新建一个MineMiddleView.js，专门用于构建中间的内容 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

/**  * 个人中心中间内容设置  */ 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;

 

2.Mine.js里使用该组件 

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

/**  * 我的  */ 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;

 

3.效果图

 

4.MiddleData.json

?

1 2 3 4 5 6

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

.