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

/** * 个人中心中间内容设置 */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 (            
     
                      {this.renderAllItem()}            
             );    },    renderAllItem(){        // 定义组件数组        var itemArr = [];        // 遍历        for(var i=0; i
     
                  );        }        // 返回        return itemArr;    }});// 里面的组件类var InnerView = React.createClass({    getDefaultProps(){        return{            iconName: '',            title:''        }    },    render(){        return(            
      
       {alert('0')}}>                
                           
                            
        
         {this.props.title}
                        
                   
              );    }});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里使用该组件 

 

/** * 我的 */import React, { Component } from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    ScrollView} from 'react-native';/*======导入外部组件类======*/var MyCell = require('./CommonMyCell');var MiddleView = require('./MineMiddleView');// ES5var Mine = React.createClass({    render() {        return (            
                     
                          
                           
                       
                      
                          
                       
                      
                          
                       
                      
                          
                       
                      
                          
                       
                  
             );    }});const styles = StyleSheet.create({    scrollViewStyle:{           }});// 输出module.exports = Mine;

 

3.效果图

 

4.MiddleData.json

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

.