React Native 实现分组展开收缩效果

实现思路:

1. 将分组cell封装成一个单独的组件，代码如下

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  TouchableOpacity
} from 'react-native';
export default class CoverageCell extends Component {
  //初始化数据，添加isShow属性，isShow属性控制展开与关闭
 constructor(props) {
    super(props);
  
    this.state = {
      isShow:false,
    };
  }

  detail=(title)=>{
// 改变状态，刷新组件
    this.setState({
      isShow:!this.state.isShow
    });
// 子组件给父组件传点击的是哪一个分组
    this.props.detail(title);
  }
//初始化数据需要一个分组的titil和一个分组下的数组
  static defaultProps = {
    title:'',
    cars:[],
  }
//利用push输出分组下的cell
  isShowText(){
   const {title,cars} = this.props;
   var allChild = [];
   for (var i = 0; i < cars.length; i++) {
     allChild.push(
        
           {cars[i].name}
           {cars[i].phoneNumber}
        
      )
    }
    return allChild;
  }
  
  render() {
    const {title,cars} = this.props;
    return (
       
             
              {this.detail(title)}}
                                style={{
                                     height:40,
                                     borderColor:'black',
                                     borderWidth:1,
                                     flexDirection:'row',
                                     alignItems:'center'}}>
                 {title}
                 
              
              {this.state.isShow?{this.isShowText()}:}
             
               
       
    );
  }
}

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';
// 数据源
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:'同学',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);
  }
  //引用组件把数组传进去
  renderMover(data){
    const {title,persons} = data;
    return(
        
    );
  }
  render() {
    return (
      
        
      
    );
  }
}

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