實(shí)現(xiàn)思路:

1. 將分組cell封裝成一個(gè)單獨(dú)的組件，代碼如下

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TouchableOpacity
} from 'react-native';
export default class CoverageCell extends Component {
  //初始化數(shù)據(jù)，添加isShow屬性，isShow屬性控制展開與關(guān)閉
 constructor(props) {
    super(props);
  
    this.state = {
      isShow:false,
    };
  }

  detail=(title)=>{
// 改變狀態(tài)，刷新組件
    this.setState({
      isShow:!this.state.isShow
    });
// 子組件給父組件傳點(diǎn)擊的是哪一個(gè)分組
    this.props.detail(title);
  }
//初始化數(shù)據(jù)需要一個(gè)分組的titil和一個(gè)分組下的數(shù)組
  static defaultProps = {
    title:'',
    cars:[],
  }
//利用push輸出分組下的cell
  isShowText(){
   const {title,cars} = this.props;
   var allChild = [];
   for (var i = 0; i < cars.length; i++) {
     allChild.push(
        <View key={i} style={{height:30,flexDirection:'row',alignItems:'center'}}>
           <Text style={{flex:2}}>{cars[i].name}</Text>
           <Text style={{flex:2,textAlign:'right'}}>{cars[i].phoneNumber}</Text>
        </View>
      )
    }
    return allChild;
  }
  
  render() {
    const {title,cars} = this.props;
    return (
       <View style={{flex: 1}}>
             <View style={{flex:1,marginBottom:15,backgroundColor:'white'}}>
              <TouchableOpacity onPress={()=>{this.detail(title)}}
                                style={{
                                     height:40,
                                     borderColor:'black',
                                     borderWidth:1,
                                     flexDirection:'row',
                                     alignItems:'center'}}>
                 <Text>{title}</Text>
                 <View style={{backgroundColor:this.state.isShow?'red':'green',height:15,width:15}}></View>
              </TouchableOpacity>
              {this.state.isShow?<View>{this.isShowText()}</View>:<View></View>}
             </View>
               
       </View>
    );
  }
}

const styles = StyleSheet.create({
    headerLine:{  
    height:50,  
    flexDirection:'row',  
    borderBottomWidth:1,  
    borderBottomColor:'red',  
  },  
  headerRows:{  
    flex:1,  
    justifyContent:'center',  
    alignItems:'center',  
  },  
  showitemContain:{  
    borderWidth:1,  
    borderColor:'red',  
    height:110,  
    justifyContent:'center',  
    alignItems:'center',  
  }  
});

2.在頁面中引用

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView
} from 'react-native';
import CoverageCell from './CoverageCell';
// 數(shù)據(jù)源
var CoverageArrs = 
          [{title:'家人',persons:[
                 {name:'爸爸',phoneNumber:'13500000001',id:'1'},
                 {name:'媽媽',phoneNumber:'13500000002',id:'2'},
                 {name:'姐姐',phoneNumber:'13500000003',id:'3'},
                 {name:'姐姐',phoneNumber:'13500000004',id:'3'}]},
           {title:'同學(xué)',persons:[
                 {name:'張敏',phoneNumber:'18700000001',id:'4'},
                 {name:'劉聰',phoneNumber:'18700000002',id:'5'},
                 {name:'張瀾',phoneNumber:'18700000003',id:'6'}]},
           {title:'朋友',persons:[
                 {name:'李斯',phoneNumber:'15800000007',id:'7'},
                 {name:'張娃',phoneNumber:'15800000008',id:'8'},
                 {name:'納斯',phoneNumber:'15800000009',id:'9'}]},
           {title:'同事',persons:[
                 {name:'張超',phoneNumber:'13700000003',id:'10'},
                 {name:'康米',phoneNumber:'13700000004',id:'11'},
                 {name:'杜康',phoneNumber:'13700000005',id:'12'},
                 {name:'張楠',phoneNumber:'13700000008',id:'12'},
                 {name:'楊林',phoneNumber:'13400000009',id:'13'}]}
          ];
export default class SectionDemo extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
       dataSource:new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}).cloneWithRows(CoverageArrs),
    };
  }
  detail(title){
    alert(title);
  }
  //引用組件把數(shù)組傳進(jìn)去
  renderMover(data){
    const {title,persons} = data;
    return(
        <CoverageCell title={title}
                      cars={persons}
                      detail={this.detail.bind(this)}/>
    );
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView  style={{flex:1,marginTop:64}}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderMover.bind(this)}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('SectionDemo', () => SectionDemo);

QQ20170810-173411-HD.gif