<View>{data.map((groupItem, groupIndex) => {return (<View key={`group-${groupIndex}`}>{renderGroupHeader.bind(this, groupItem. groupHeaderData, groupIndex)}{groupItem.groupListData.map((listItemData, listItemIndex) => {return (<View key={`group-${groupIndex}-list-item-${listItemIndex}`}>{renderListItem.bind(this, listItemData, groupIndex, listItemIndex)}</View>
                    );})}</View>
        );})}
</View>

<ExpandableListdata={xxx}style={xxx}groupStyle={xxx}groupSpacing={xxx}implementedBy={xxx}renderGroupHeader={xxx}renderGroupListItem={xxx}/>

import React, {Component} from 'react';
import {View,ListView,ScrollView,FlatList,LayoutAnimation
} from 'react-native';export class ExpandableList extends Component {constructor(props) {super(props);this._supportFlatList = this. _supportFlatList.bind(this);this._renderUsingView = this._renderUsingView.bind(this);this._renderUsingFlatList = this._renderUsingFlatList.bind(this);this._renderUsingListView = this._renderUsingListView.bind(this);}_supportFlatList() {return !!FlatList;}_renderUsingFlatList() {// ...
    }_renderUsingView() {// ...
    }_renderUsingListView() {// ...
    }render() {const strategy = {'View': this._renderUsingView,'ListView': this._renderUsingListView,'FlatList': this._supportFlatList() ? this._renderUsingFlatList : this._renderUsingListView};let {implementedBy} = this.props;if(!strategy[implementedBy]) {implementedBy = 'FlatList';}return strategy[implementedBy]();}
}

export class ExpandableList extends Component {constructor(props) {super(props);this.state = {groupStatus: this._getInitialGroupStatus()};}_getInitialGroupStatus() {const {initialOpenGroups = [], data = []} = this.props;// true代表open, false代表closedreturn new Array(data.length).fill(false).map((item, index) => {return initialOpenGroups.indexOf(index) !== -1;});}
}

export class ExpandableList extends Component {toggleOpenStatus(index, closeOthers) {// 支持在切换自身状态的时候，同时把其他的group都关闭const newGroupStatus = this.state.groupStatus.map((status, idx) => {return idx !== index ? (closeOthers ? false : status) : !status;});this.setState({groupStatus: newGroupStatus});}_renderGroupItem(groupItem, groupId) {const status = this.state.groupStatus[groupId];const {groupHeaderData = [], groupListData = []} = groupItem;const {renderGroupHeader, renderGroupListItem, groupStyle, groupSpacing} = this.props;const groupHeader = renderGroupHeader && renderGroupHeader({status,groupId,item: groupHeaderData,toggleStatus: this.toggleGroupStatus.bind(this, groupId)});const groupBody = groupListData.length > 0 && (<ScrollView bounces={false} style={!status && {height: 0}}>{groupListData.map((listItem, index) => (<View key={`gid:${groupId}-rid:${index}`}>{renderGroupListItem && renderGroupListItem({item: listItem,rowId: index,groupId})}</View>
                ))}</ScrollView>
        );return (<Viewkey={`group-${groupId}`}style={[groupStyle, groupId && groupSpacing && {marginTop: groupSpacing}]}>{groupHeader}{groupBody}</View>
        );}_renderFlatListItem({item, index}) {return this._renderGroupItem(item, index);}_renderListViewItem(rowData, groupId, rowId) {return this._renderGroupItem(rowData, parseInt(rowId));}_renderUsingFlatList() {const {data=[], style} = this.props;return (<FlatListdata={data}style={style}showsVerticalScrollIndicator={false}keyExtractor={(item, index) => index}renderItem={this._renderFlatListItem}/>
        );}_renderUsingView() {const {data = [], style} = this.props;return (<View style={style}>{data.map((item, groupId) => {return this._renderGroupItem(item, groupId);})}</View>
        );}_renderUsingListView() {const {data = [], style} = this.props;return (<ListViewstyle={style}showsVerticalScrollIndicator={false}renderRow={this._renderListViewItem}dataSource={new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(data)}/>
        );}
}

export class ExpandableList extends Component {componentWillUpdate() {LayoutAnimation.easeInEaseOut();    // 也可以用LayoutAnimation.spring()
    }}